从 Javascript 中的 if 语句执行 DOM 的问题

Posted 2023-05-07

【中文标题】从 Javascript 中的 if 语句执行 DOM 的问题

【英文标题】：Problem to execute DOM from if statement in Javascript

【发布时间】：2020-09-07 05:21:42

【问题描述】：

所以我尝试运行一个简单的函数，根据随机生成的数字生成获胜者。 到目前为止一切顺利，但是当我不仅要返回“获胜者”而且要返回更改 innerhtml 时，它不会说“.innerHTML 不是函数”。

**我尝试将 return 也作为比 document.innerHTML 的回报... 另外，我尝试在 var 中创建它并返回 var 但总是出现同样的问题。

function runNum() 
  // randomize of number between 1-6
  var a = Math.floor(Math.random() * 6 + 1);
  var b = Math.floor(Math.random() * 6 + 1);
  console.log(a, b);
  if (a > b) 
    document.querySelector(".winnerclick").innerHTML("winner1");
    console.log("a");
  
  if (b > a) 
    return document.querySelector(".winnerclick").innerHTML("winner2");
    console.log("b");
  
  if (a === b) 
    document.querySelector(".winnerclick").innerTEXT("Draw - no winner");
  

<h1 class="winnerclick">
  Click on the button to play!
</h1>
<button onclick="runNum()">
Click to start
</button>

我尝试找到答案，但没有解决这个问题。为什么没有退回？

【问题讨论】：

.innerHTML 不是函数。你给它赋值。

你看过innerHTML documentation吗？它被定义为属性，而不是函数。

【参考方案1】：

实际上，您面临的错误是正确的，因为innerHTML 不是函数，因此您也不能用括号调用它。你可以通过给它赋值来设置它的值。

所以你的最终代码应该是这样的：

function runNum() 
  // randomize of number between 1-6
  var a = Math.floor(Math.random() * 6 + 1);
  var b = Math.floor(Math.random() * 6 + 1);
  console.log(a, b);
  if (a > b) 
    document.querySelector(".winnerclick").innerHTML = "winner1";
    console.log("a");
  
  if (b > a) 
    return document.querySelector(".winnerclick").innerHTML = "winner2";
    console.log("b");
  
  if (a === b) 
    document.querySelector(".winnerclick").innerTEXT = "Draw - no winner";
  

<h1 class="winnerclick">
  Click on the button to play!
</h1>
<button onclick="runNum()">
Click to start
</button>

【讨论】：

天哪，我怎么会错过它？我花了至少 2 个小时来弄清楚发生了什么，这一切看起来都很棒，但是 = 而不是 ()。非常感谢你们！

【参考方案2】：

Pointy 是正确的，但我觉得他们的答案可能需要稍微澄清一下。当你想改变 .innerHTML 的值时，不要使用 .innerHTML("new value");你使用 .innerHTML = "new value";

【讨论】：

非常感谢，两小时后我不明白我是怎么错过的。只是语法，它是在我看到文档和其他问题之后。谢谢！