當按鈕在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中單擊時，輸入不會改變

回答

相關問題