Посчитать сумму

352

16 декабря 2017, 08:35

Есть код, который генерирует список. Данные берутся из форм. При нажатии на кнопку add Внизу должно появляться суммированное значение всех чисел последнего элемента списка, что у меня не получилось. Пробовал разные варианты но результат один. Что я делаю неправильно.

<body>
    <form>
        <input type="text" name="text1" value="Some text" class="ai" id="ai" >
        <input type="text" name="number1" value="Some numbers" class="qu" id="qu">
        <input type="text" name="number2" value="Some numbers" class="pr" id="pr">
        <input type="button" name="add" value="Add" class="add" id="add">
    </form>     
    <div id="items" class="items">
    </div>
    <div id="priceTotal">
    </div>
<script type="text/javascript">
    var a = document.getElementById('ai');
    var b = document.getElementById('qu');
    var c =document.getElementById('pr');
    var d = document.getElementById('add');
    var e = document.getElementById('items');
    var elems = document.querySelectorAll('.price');
    var price = document.getElementById('priceTotal')
    var i = 0;
         var g = function(){
            i++;
            return i; 
            }
    function f(){
        var ul = document.createElement('ul');//создаем список
        e.appendChild(ul);// вставляем в блок items
        ul.className ="item"; // добавляем класс
        var li = document.createElement('li');// создаем элемент списка
        ul.appendChild(li);
        li.innerHTML = g();
        var li2 = document.createElement('li'); //создаем второй элемент списка с чекбоксом
        ul.appendChild(li2);
        var checkbox = document.createElement('input');// вставляем чекбокс внутрь элемента списка списка
        li2.appendChild(checkbox);
        checkbox.type = "checkbox";
        var li3 = document.createElement('li');
        ul.appendChild(li3);
        li3.innerHTML = a.value; //вставляем название продукта
        var li4 = document.createElement('li');
        ul.appendChild(li4);
        li4.innerHTML = b.value;
        var li5 = document.createElement('li');
        ul.appendChild(li5);
        li5.className = "price";
        li5.innerHTML = c.value;
    }
    var elems = document.querySelectorAll('.price');
    var z= 0;
    function totalPrice(){
        for (var i = 0; i< elems.length; i++) {
            var item = elems[i];
            z+= item;
        }
        price.innerHTML =z; }
    d.addEventListener("click", f);
    d.addEventListener("click", totalPrice);
</script>

Answer 1

function totalPrice(){
  var z = 0;
  var elems = document.querySelectorAll('.price');
  for (var i = 0; i < elems.length; i++) {
    var itemPrice = +elems[i].innerHTML;
    z += itemPrice;
  }
  price.innerHTML = z; 
}

Ну, и как обычно:

"из форм" - множественное число. id="pr" - повторяется? Нельзя.