按钮没有调用函数

Question

我正在为一个简单的计算器编写代码。我的大多数按钮似乎都能正常工作并正确调用函数，但由于某种原因，我的 clear 函数没有被调用。我的按钮和输入栏的 HTML 是：

<p id="input" style="border:1px solid black" style="width:100px"><br></p>
<table>
    <tr>
        <td><button style="width:100%">m+</button></td>
        <td><button style="width:100%">m-</button></td> 
        <td><button style="width:100%">mc</button></td>
        <td><button style="width:100%" onclick='memory("mr")'>mr</button></td>
        <td><button onclick="clear()" style="width:100%">c</button></td>
    </tr>
    <tr>
        <td><button onclick="addChar('7')" style="width:100%">7</button></td>
        <td><button onclick="addChar('8')" style="width:100%">8</button></td>   
        <td><button onclick="addChar('9')" style="width:100%">9</button></td>
        <td><button onclick="setOperator('/')" colspan="2" style="width:200%">/</button></td>
    </tr>
    <tr>
        <td><button onclick="addChar('4')" style="width:100%">4</button></td>
        <td><button onclick="addChar('5')" style="width:100%">5</button></td>       
        <td><button onclick="addChar('6')" style="width:100%">6</button></td>
        <td><button onclick="setOperator('*')" colspan="2" style="width:200%">*</button></td>
    </tr>
    <tr>
        <td><button onclick="addChar('1')" style="width:100%">1</button></td>
        <td><button onclick="addChar('2')" style="width:100%">2</button></td>   
        <td><button onclick="addChar('3')" style="width:100%">3</button></td>
        <td><button onclick="setOperator('-')" colspan="2" style="width:200%">-</button></td>
    </tr>
    <tr>
        <td><button style="width:100%">+/-</button></td>
        <td><button onclick="addChar('0')" style="width:100%">0</button></td>
        <td><button onclick="addChar('.')" style="width:100%">.</button></td>
        <td><button onclick="calculate()" style="width:100%">=</button></td>
        <td><button onclick="setOperator('+')" style="width:100%">+</button></td>
    </tr>
</table>

这些按钮然后调用它们各自的功能：

<script>
var str = "";
var operand1 = 0;
var operand2 = 0;
var op = "";
var mem = 0;
var input = document.getElementById("input");
function addChar(char) {
    str += char;
    input.innerHTML = str;
}
function clear() {
    str = "";
    input.innerHTML = "<br>";
}
function setOperator(operator) {
    op = operator;
    operand1 = str;
    str = "";
    input.innerHTML = "<br>";
}
function calculate() {
    operand2 = str;
    if (op === "+")
    {
        str = ((+operand1) * 10 + (+operand2) * 10)/10;
    }
    else if (op === "-")
    {
        str = (operand1 - operand2);
    }
    else if (op === "*")
    {
        str = (operand1 * operand2);
    }
    else if (op === "/")
    {
        str = (operand1 / operand2);
    }
    input.innerHTML = str;
}
</script>

标记为 "c" 的按钮应该调用我的函数 "clear()"，但 "onclick" 事件似乎从未发生过。很有可能只是我没有经验而无法找到一些错字。感谢任何帮助。

Answer 1

内联 onclick 处理程序期望函数在设置之前加载。我假设你在 js 之前加载 html。如果不是，那么它希望函数成为全局对象的一部分，即 window.

尝试像这样分配您的函数：

 window.addChar = function addChar(char) { ... };

使用 addEventListener 方法分配点击处理程序通常更好。

Answer 2

您运行陷入了 JavaScript 的一个晦涩怪癖，当您将内联事件处理程序与一个名为 clear() 的自定义函数一起使用时，就会出现这种怪癖。有一个 document.clear() 函数，在内联 JavaScript 的上下文中，它恰好在作用域链中首先被命中，所以这是你的 clear() 调用调用的，而不是你的全局调用window.clear() 函数。

您可以通过将 clear() 调用替换为 alert(clear === document.clear); 来证明这一点，其中 alerts true.

您可以通过显式限定调用（即 window.clear() 而不是 clear() 或重命名函数来解决问题。但是，应该提到的是，您应该考虑用纯 JavaScript 事件处理程序注册替换内联事件处理程序，这被认为是更可取的，因为它更有效地将表示与逻辑分开。

参见 Is "clear" a reserved word in Javascript?。

Answer 3

工作解决方案：http://jsfiddle.net/b9h7L3av/

全部需要重命名 clear() 函数。

function clearAll() {
  str = "<br>";
  input.innerHTML = str;
}

按钮没有调用函数

Button isn't calling function

javascript

calculator

onclick

button