<!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>
2 回答
已采纳
堂堂堂堂糖糖糖童鞋
TA贡献101条经验 获得超58个赞
问题一：并没有看到输入框中有class为 num的类名
问题二：num得到的是一个数组需要去对应的下标
问题三：是由问题二引发的，那就是for循环执行完之后 i变成了 4，导致取不到对应的表单元素，可以用 let去声明i简单解决
堂堂堂堂糖糖糖童鞋
TA贡献101条经验 获得超58个赞
<!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>添加回答
举报
0/150
提交
取消