请问下这个代码哪里有问题啊？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p>
<button>-</button>
<input type="text" value="1">
<button>+</button>
</p>
<p>
<button>-</button>
<input type="text" value="1">
<button>+</button>
</p>
<p>
<button>-</button>
<input type="text" value="1">
<button>+</button>
</p>
<p>
<button>-</button>
<input type="text" value="1">
<button>+</button>
</p>
<script>
//获取元素
var add=document.querySelectorAll('.add');//加法按钮
var subtraction=document.querySelectorAll('.subtraction');//减法按钮
var num=document.querySelectorAll('.num');//数量
var i;
//加法操作
for( i = 0; i < add.length; i++)
{
add[i].onclick=function()
{
num.value=num.value * 1 + 1;
}
}
//减法操作
for( i = 0; i < subtraction.length; i++)
{
subtraction[i].onclick=function()
{
num.value=num.value * 1 - 1;
}
}
</script>
</body>
</html>
wudao2回答
-
堂堂堂堂糖糖糖童鞋
问题一：并没有看到输入框中有class为 num的类名 问题二：num得到的是一个数组需要去对应的下标 问题三：是由问题二引发的，那就是for循环执行完之后 i变成了 4，导致取不到对应的表单元素，可以用 let去声明i简单解决 -
堂堂堂堂糖糖糖童鞋
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <p> <button class="subtraction">-</button> <input class="num" type="text" value="1"> <button class="add">+</button> </p> <p> <button class="subtraction">-</button> <input class="num" type="text" value="1"> <button class="add">+</button> </p> <p> <button class="subtraction">-</button> <input class="num" type="text" value="1"> <button class="add">+</button> </p> <p> <button class="subtraction">-</button> <input class="num" type="text" value="1"> <button class="add">+</button> </p> <script> // 修改一：为上面的元素添加类型 //获取元素 var add = document.querySelectorAll('.add');//加法按钮 var subtraction = document.querySelectorAll('.subtraction');//减法按钮 var num = document.querySelectorAll('.num');//数量 //加法操作 for (let i = 0; i < add.length; i++) { // 修改三：用 let 声明 i add[i].onclick = function () { num[i].value = num[i].value * 1 + 1; // 修改二：去获取对应的表单元素的值 } } //减法操作 for (let i = 0; i < subtraction.length; i++) { subtraction[i].onclick = function () { num[i].value = num[i].value * 1 - 1; } } </script> </body> </html>
随时随地看视频慕课网APP
相关分类
JavaScript