Question

我有这个功能（它可以）来创建一些动态输入：

 <script type='text/javascript'>

 var arr = []; 

 function espacioArreglos() {
 // Number of inputs to create
        var number = document.getElementById("cantidadArreglos").value;
        // Container <div> where dynamic content will be placed
        var container = document.getElementById("container");
        // Clear previous contents of the container
        while (container.hasChildNodes()) {
            container.removeChild(container.lastChild);
        }
        for (i=0;i<number;i++){
            // Append a node with a random text
            container.appendChild(document.createTextNode("Arreglo #" + (i+1)));
            // Create an <input> element, set its type and name attributes
            var input = document.createElement("input");
            input.type = "number";
            input.name = "arreglo" + i;

  //set ID to each input to calculate summatory
          var inputId = 'input-' + i;
          input.setAttribute('id', inputId);
          arr.push(inputId);
          input.setAttribute('onchange', function() {
var sum = 0;
arr.forEach(function(val) {
    var inputVal = document.getElementById(val).value;
    if (inputVal) sum += inputVal;
});


document.getElementById('totalPlacas').value = sum;
});
            container.appendChild(input);
            // Append a line break 
            container.appendChild(document.createElement("br"));


 }
 }

 </script>

现在我想显示输入值的总和。这是HTML：

 <tr>
  <td align="center" bgcolor="#D4D4D4">Cantidad de arreglos:</td>
  <td align="center" bgcolor="#D4D4D4"><input type="number" id="cantidadArreglos" onchange="espacioArreglos();" size="1"></td>
</tr>

<tr>
    <td align="center" bgcolor="#D4D4D4">Cantidad de placas:</td>
    <td bgcolor="#FFFF00"><div id="container"/></td>
</tr>

<tr>
  <td align="center" bgcolor="#D4D4D4">Total de placas:</td>
  <td align="center" bgcolor="#D4D4D4"><div id="totalPlacas"></div></td>
</tr>

所以，你在＆＃34; Cantidad de arreglos＆＃34;中输入一个数字，它会调用函数＆＃34; espacioArreglos＆＃34;然后我想使用我将在生成的输入上输入的值来计算其总和，这应该显示在div＆＃34; totalPlacas＆＃34;。但是，什么都没有出现......我的代码问题是什么？

Answer 1

您需要为输入元素指定唯一ID，以便使用document.getElementById()引用它们。

类似的东西：

input.setAttribute("id", 'input' + i);

Answer 2

如何将id分配给动态输入并将其存储在数组中。首先，在函数外部（全局范围）定义一个空数组：

var arr = [];

在你的for循环中：

var inputId = 'input-' + i;
input.setAttribute('id', inputId);
arr.push(inputId);
input.setAttribute('onchange', function() {
    var sum = 0;
    arr.forEach(function(val) {
        var inputVal = document.getElementById(val).value;
        if (inputVal) sum += inputVal;
    });

    // do something with the sum
    console.log(sum)
});

Answer 3

需要做一些改变：

首先，改变 <div id="container"/>到<div id="container"></div>，因为div上的快捷方式会破坏HTML，导致totalPlacas不存在。

其次，使用

添加onchange事件

input.onchange = function() {...}

现在应该使用.innerText = sum将结果添加到'totalPlacas'div，而不是使用.value = sum。

现在您可以检查显示的结果是字符串的串联而不是添加数字，这可以解决替换

if (inputVal) sum += inputVal;

与

if (inputVal) sum += parseInt(inputVal);

当用户键入字母或符号而不是数字时，您应该添加某种验证以避免错误。

希望它有效！

来自另一个函数中创建的动态输入的总和值

3 个答案: