Суммирование значений из динамических входов, созданных в другой функции

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>

Таким образом, вы вводите число в «Cantidad de arreglos», оно вызывает функцию «espacioArreglos», а затем я хочу использовать значения, которые я введу для сгенерированных входных данных, чтобы вычислить его сумму, которая должна отображаться в div «totalPlacas». » . Однако ничего не появляется ... В чем проблема с моим кодом?

javascript jquery html

-1

Eduardo Rocha 28 Авг 2017 в 18:53

Answer 1

Есть некоторые изменения, которые необходимо сделать:

Во-первых, измените <div id="container"/> до <div id="container"></div>, поскольку ярлык на элементе div прерывает HTML, в результате чего totalPlacas не существует.

Во-вторых, добавьте событие onchange, используя

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

Теперь результат должен быть добавлен в div 'totalPlacas', используя .innerText = sum, вместо этого используя .value = sum.

Теперь вы можете проверить, что отображаемый результат представляет собой конкатенацию строк вместо добавления чисел, это можно решить, заменив

if (inputVal) sum += inputVal;

С участием

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

Вы должны добавить какую-то проверку, чтобы избежать ошибки, когда пользователь вводит букву или символ вместо числа.

Надеюсь, что это работает!

0

Sergio Diez 28 Авг 2017 в 20:32

Answer 2

Вам нужно будет назначить уникальный идентификатор для элементов ввода, чтобы вы могли ссылаться на них, используя document.getElementById().

Что-то типа:

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

0

Patrick 28 Авг 2017 в 16:02

Answer 3

Как насчет присвоения идентификаторов динамическим входам и сохранения их в массиве. Во-первых, за пределами функции (глобальная область) определите пустой массив:

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

0

Zofskeez 28 Авг 2017 в 17:21

Суммирование значений из динамических входов, созданных в другой функции

3 ответа

Похожие вопросы

Новые вопросы

javascript