当按钮在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>

我做错了什么？谢谢。

来源

2016-08-22 bslqy

element IDs are global variables

由于inline-click处理器期望的功能是global-scope（window.FUNCTION_NAME）下，function-name不能有相同的名字ID属性的值

在你例如，add/minus是DOMElements/Objects，因此不是函数add is not definedReferenceError被抛出。

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>

来源

2016-08-22 13:03:25 Rayon

您不能使用相同的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; 
}

来源

2016-08-22 12:51:20 Dinesh

当按钮在Javascript中单击时，输入不会改变

回答

相关问题