猿问

请问下这个代码哪里有问题啊？

<!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>


wudao
浏览 1216回答 2
2回答

堂堂堂堂糖糖糖童鞋

问题一：并没有看到输入框中有class为 num的类名 问题二：num得到的是一个数组需要去对应的下标 问题三：是由问题二引发的，那就是for循环执行完之后 i变成了 4，导致取不到对应的表单元素，可以用 let去声明i简单解决
0

堂堂堂堂糖糖糖童鞋

<!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
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答