Question

我正在写一个简单的计数器，在每个按钮上添加或mimus。但是，我无法相应地更改文本输入。

<!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>

我做错了什么？谢谢。

Answer 1

您不能使用相同的ID名称和功能名称。请试试这个。它会起作用。

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

</div>

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


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


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

Answer 2

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>

在Javascript中单击按钮时输入不会更改

2 个答案: