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>

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

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

Answer 1

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

因此，您的函数实际上是立即执行的（在任何人单击任何按钮之前），并且从它们返回的值（无）是被分配为onclick属性的值。因此，当您单击“反向”按钮时，它确实会调用reverse()函数，但是您在该函数中执行的onclick分配实际上并未将onclick属性设置为任何值。 / p>

您的代码应为：

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对象属性可以工作，但它们都是非常古老的技术，它们具有大弊端。 Read this来了解为什么您实际上不应该使用内联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>

Answer 2

您必须返回函数本身，而不是返回值，因此必须删除括号。

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上调用了错误的函数

2 个答案: