Question

我在学校学习JS，这项任务是一项功课，它杀了我。

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

我根本无法从新输入字段中获取价值，我现在无法从这一点开始，我读过的所有内容都没有帮助。这是我到目前为止所做的代码，记住我是一个完整的初学者，这个任务对我来说非常重要。

＆＃13;

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;
}

＆＃13;

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

＆＃13;

提前致谢

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`

它说＆＃34;得到元素 s ＆＃34;，所以有多个元素，但是你要求＆＃34;值＆＃34;，所以单个值;浏览器如何知道您想要的值？

您已经运行了此功能，并将结果放在arr中，然后使用计数器i对其进行循环。因此，您希望从获取价值。

然后重用该变量将数字放入;如果您选择了更好的变量名称，例如listOfInputElements和listOfValues，那么这是一个不好的想法和诱惑。

Answer 3

您需要为新创建的输入添加特定类，因为document.getElementsByTagName("INPUT")会使用您的#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时要小心。我在生成的输入上添加了类generated-input，因此可以单独获取它们。

＆＃13;

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;
}

＆＃13;

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

＆＃13;

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

4 个答案: