无法使用 getElementsByTagName 从输入字段收集值

Question

我在学校学习 JS，这项任务是一项家庭作业，它让我很难受。

我需要创建一个输入字段和两个按钮。第一个按钮需要根据第一个输入值创建给定数量的输入元素，第二个按钮应该从新输入中获取所有值并求和。

我根本无法从新的输入字段中获取值，我已经有一周无法离开这一点了，而且我阅读的所有内容都没有帮助。这是我到目前为止编写的代码，请记住我是一个完全的初学者，这个任务对我来说真的很重要。

function myFunction() {
    var i = document.getElementById("input1").value;
    for (var j = 1; j <= i; j++) {
        var inp = document.createElement("INPUT");
        document.body.appendChild(inp);
    }
}

function myFunction2() {
    var arr = document.getElementsByTagName("INPUT");
    for (var i = 0; i < arr.length; i++) {
        var ar = document.getElementsByTagName("INPUT").value;
        arr[i] = parseInt(ar);
    }
    for (var i = 1; i < arr.length; i++) {
        var sum = sum + arr[i];
    }
    document.getElementById("test").innerHTML = sum;
}

<input id="input1"></input><br>
<button onclick="myFunction()">dodaj</button>
<button onclick="myFunction2()">saberi</button><br>
<p id="test"></p>

提前致谢

Answer 1

更新您的 myFunction2 ：

 function myFunction2() {
      var arr = document.getElementsByTagName("INPUT");
      var sum = 0;
      for (var i = 0; i < arr.length; i++) {
        var ar = document.getElementsByTagName("INPUT")[i].value;
        sum = sum + parseInt(ar);
      }
      document.getElementById("test").innerHTML = sum;
    }

您不再需要 for 循环。让我们声明变量 sum 并为其添加值。如果您不想从第一个输入添加值，请从 1 开始循环。

Answer 2

仔细阅读这一行：

document.getElementsByTagName("INPUT").value`

说的是"get elements"，所以元素不止一个，但是你要的是"value"，所以一个值；浏览器如何知道您想要哪个值？

您已经运行这个函数，并将结果放入 arr，并且您正在循环它，计数器 i。所以这就是你想要从 .

获得你的价值的地方
然后您重新使用该变量将数字放入；这是个坏主意，如果你选择更好的变量名，比如 listOfInputElements 和 listOfValues.
，你就不会受到诱惑

Answer 3

您需要将特定的 class 添加到新创建的输入中，因为 document.getElementsByTagName("INPUT") returns 集合与您的 #input1.

这是一个代码：

<!DOCTYPE html>
<html>
    <head>
         <title>Sabiranje</title>
    </head>
<body>
<p>Unesite izabrani broj clanova niza</p>
<input id="input1"></input><br>
<button onclick="myFunction()">dodaj</button>
<button onclick="myFunction2()">saberi</button><br>
<p id="test"></p>
    <script>
    function myFunction(){
        var i = document.getElementById("input1").value;
        for (var j=1; j<=i; j++){
            var inp = document.createElement("INPUT");
            inp.className = 'new-inp';
            document.body.appendChild(inp);
        }
    }

    function myFunction2(){
        var arr = document.getElementsByClassName("new-inp");
        var sum = 0;
        for (var i = 0; i < arr.length; i++){
            sum += parseFloat(arr[i].value);
        }

        document.getElementById("test").innerHTML = sum;
    }
    </script>
</body>
</html>

Answer 4

我修改了你的代码，但它可以写得更好。

您在 myFunction2() 中遇到了一些逻辑问题。当您想要对所有输入值求和以不包括#input1 时请小心。我在生成的输入上添加了 class generated-input 以便可以单独获取它们。

function myFunction() {
    var i = document.getElementById("input1").value;
    for (var j = 1; j <= i; j++) {
        var inp = document.createElement("input");
        inp.className = 'generated-input';
        document.body.appendChild(inp);
    }
}

function myFunction2() {
    var arr = document.querySelectorAll(".generated-input");
    var sum = 0;
    for (var i = 0; i < arr.length; i++) {
        sum += parseInt(arr[i].value);
    }
    document.getElementById("test").innerHTML = sum;
}

<input id="input1"></input><br>
<button onclick="myFunction()">dodaj</button>
<button onclick="myFunction2()">saberi</button><br>
<p id="test"></p>

无法使用 getElementsByTagName 从输入字段收集值

cant collect values from input field with getElementByTagName

javascript

arrays

getelementsbytagname