Создайте массив в Javascript, используя вставки для цикла и HTML

Question

Я проиндексировал кучу входов в моей html-форме.

Я хочу прокрутить входы и создать массив. Из этого массива я хочу собрать общую сумму (суммы) полей и, наконец, добавить еще один ввод HTML, чтобы отобразить эту сумму.

Я знаю, как это сделать на PHP, но я борюсь с JavaScript, и мне нужно, чтобы это было сделано на стороне клиента.

Я попытался построить как можно больше из этого. Here является jsFiddle:

Вот мой HTML:

<div style="padding:5px;clear:both;"><input type="text" name="total_inkind" id="total_inkind" placeholder="$" onchange="calcInKind()"></div> 

и Javascript:

function calcInKind() { 
    var runningTotal = 0; 
    var i = 0; 
    for (var i = 0; document.getElementById('inkind').value; i++){ 
     if(document.getElementById('inkind').value != ''){ 
      $gwyl_gr = document.getElementById('inkind').value; 
      $runningTotal = parseFloat($runningTotal) + parseFloat($gwyl_gr); 
      }else{ 
      $gwyl_gr = 0; 
      } 
      i = i++; 
     } 
    document.getElementById('total_inkind').value = $runningTotal; 
    } 

Answer 1

Для чего-то же просто, как сумма всех элементов формы, вы на самом деле не нужен массив, если вы не хотите манипулировать каждым значением больше, чем один. Тем не менее, вы можете перебирать все введенные вами данные в форме, принимая его значение и добавляя его к общей сумме.

Однако, глядя на ваш код, я должен заметить, что Javascript не требует переменных, которым предшествует $ unlike PHP. Однако у вас есть возможность использовать их, которые часто используют пользователи JQuery, чтобы обозначить, что их переменная на самом деле является переменной JQuery.

Я раздвоенный свой JSFiddle и переписал некоторые вещи, чтобы заставить его работать, как вопрос гласит: JSFiddle

function sumTheInkinds() { 
    var runningTotal = 0; 
    var ourlist = document.getElementsByClassName("inkind"); 
    for (var i = 0; i < ourlist.length; i++) { 

     if (ourlist[i].value != '') { 
      try { 
       runningTotal = runningTotal + parseFloat(ourlist[i].value); 
      } catch (err) { 
       alert ("Value was not a float!"); 
      } 
     } 

    } 

    document.getElementById('total_inkind').value = runningTotal; 
}; 
document.getElementById("runcalc").onclick = sumTheInkinds; 

Моя реализация однако опирается на нажатие кнопки, которая не может быть запланированными, который может быть легко изменен обратно onchange, применяя это:

var inks = document.getElementsByTagName("inkind"); 
for (var i=0;i<inks.length;i++) { 
    inks.onchange = sumTheInkinds; 
}