javascript - 在Javascript中单击按钮时输入未更改

我正在编写一个简单的计数器，该计数器在每次单击相应按钮时会增加或减少。但是，我无法相应地更改文本输入。

<!DOCTYPE html>
<html>
<body>

<div>
    <form>
      <input id="minus" type="button" value="-" onclick="minus()" >
      <input id="num" type="text" name="message" value="10">
      <input id="add" type="button" value="+" onclick="add()" >
  </form>

</div>

<script>
    var input = document.getElementById("num");


    function add()
    {
        var result = (parseInt(input.value,10) + 1).toString();
        input.value = result;
    }


    function minus()
    {
        var result = (parseInt(input.value,10) - 1).toString();
        input.value = result;
    }
</script>

</body>
</html>

我做错了什么？
谢谢。

最佳答案

element IDs are global variables

由于inline-click处理程序期望函数位于global-scope（window.FUNCTION_NAME）下，因此function-name不能与ID属性的值具有相同的名称

在您的示例中，add/minus是DOMElements/Objects，不是函数，因此会抛出add is not defined ReferenceError。

console.log(add);
console.log(minus);

<div>
  <form>
    <input id="minus" type="button" value="-" onclick="minusCount()" />
    <input id="num" type="text" name="message" value="10">
    <input id="add" type="button" value="+" onclick="addCount()">
  </form>
</div>

建议使用JavaScript-Event-Binding(addEventListener)代替Inline-event-handlers

var input = document.getElementById("num");
var add = document.getElementById("add");
var minus = document.getElementById("minus");
add.addEventListener('click', function() {
  input.value = (parseInt(input.value, 10) + 1).toString();
});
minus.addEventListener('click', function() {
  input.value = (parseInt(input.value, 10) - 1).toString();
});

<div>
  <form>
    <input id="minus" type="button" value="-">
    <input id="num" type="text" name="message" value="10">
    <input id="add" type="button" value="+">
  </form>
</div>