javascript - HTML Button onclick 调用了错误的函数

Question

我制作了一个 html 文档，它基本上是一个将十进制数转换为二进制数的程序。有用。我添加了一个“反向”按钮，它会做相反的事情（将二进制转换为十进制），并且由于某种原因它运行应该由“转换”按钮运行的代码。这是代码：

function decimalToBinary() {
  document.getElementsByClassName('inputBox')[0].placeholder = 'Enter decimal number'
  alert('Hello')
}

function binaryToDecimal() {
  document.getElementsByClassName('inputBox')[0].placeholder = 'Enter binary number'
  alert('Hi')
}

function reverse() {
                if (document.getElementById('decimalNumber').placeholder === 'Enter decimal number') {
                    document.getElementById('convertButton').onclick = binaryToDecimal()
                } else if (document.getElementById('decimalNumber').placeholder === 'Enter binary number') {
                    document.getElementById('convertButton').onclick = decimalToBinary()
                }
            }

<input type="number" class="inputBox" id="decimalNumber" placeholder="Enter decimal number" min="0" step="0.0001">
<button id="convertButton" class="button hoverTurquoise" onclick="decimalToBinary()">Convert</button>
<button class="button hoverTurquoise reverse" onclick="reverse()">Reverse</button>

（我替换了所有将数字转换为警报消息的代码，以便更容易理解）

如果有人对如何解决此问题有任何想法，请告诉我。谢谢

标签： javascripthtml

Answer 1

在 JavaScript 中，函数就是数据——您可以将它们称为数据。在您的代码中，当您应该以这种方式引用它们时，您将添加()到函数名称的末尾，从而调用该函数，而不是引用它。

因此，您的函数实际上正在立即执行（在任何人单击任何按钮之前），并且它们的返回值（什么都没有）是被分配为onclick属性值的值。因此，您的“反向”按钮reverse()在您单击它时确实会调用该函数，但onclick您在该函数中所做的分配实际上并未将onclick属性设置为任何内容。

您的代码应该是：

if (document.getElementById('decimalNumber').placeholder === 'Enter decimal number') {
   document.getElementById('convertButton').onclick = binaryToDecimal;
} else if (document.getElementById('decimalNumber').placeholder === 'Enter binary number') {
   document.getElementById('convertButton').onclick = decimalToBinary;
}

现在，虽然使用内联 HTML 事件属性onclick设置事件处理程序（例如将事件处理程序设置为 JavaScript 对象属性）可以工作，但它们都是非常古老的技术，具有很大的缺点。阅读本文以了解为什么您真的不应该使用内联 HTML 事件属性。而且，就事件属性而言，它们的缺点是您不能将多个事件处理程序分配给同一个对象事件。

使用现代的、基于标准的方法，而不是这些传统技术中的任何一种.addEventListener()。

最后一件事，避免反复扫描文档以寻找相同的元素，这只是浪费资源。

这是您的代码重新设计以使用它，您会看到它有多干净。

// Get references to the elements you'll need to use more than once:
let btnConvert = document.getElementById('convertButton');
let btnReverse = document.querySelector("button.reverse");
let input = document.getElementById("decimalNumber");

// Now, set up event handlers for the buttons the modern way 
// (notice there are no () after the function names because we
// don't want to invoke them right now, we only want to refer to them.)
btnConvert.addEventListener("click", decimalToBinary);
btnReverse.addEventListener("click", reverse);

function decimalToBinary() {
  input.placeholder = 'Enter decimal number';
}

function binaryToDecimal() {
  input.placeholder = 'Enter binary number';
}

function reverse() {
  if (input.placeholder === 'Enter decimal number') {
    // We can also remove event handlers in much the same way as when we add them:
    btnConvert.removeEventListener("click", decimalToBinary);
    btnConvert.addEventListener("click", binaryToDecimal);
  } else {
    btnConvert.removeEventListener("click", binaryToDecimal);
    btnConvert.addEventListener("click", decimalToBinary);
  }
}

<input type="number" class="inputBox" id="decimalNumber" placeholder="Enter decimal number" min="0" step="0.0001">

<!-- Don't set up event handlers in HTML -->
<button id="convertButton" class="button hoverTurquoise">Convert</button>
<button class="button hoverTurquoise reverse">Reverse</button>