当按钮在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>
我做错了什么? 谢谢。
答
由于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>
答
您不能使用相同的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;
}