2

Есть код, который генерирует список. Данные берутся из форм. При нажатии на кнопку 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>

0

1 ответ 1

2
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" - повторяется? Нельзя.

4
  • Нет, там классы
    – Streammer
    15 дек 2017 в 12:03
  • @Streammer Какие классы? Вы ищите элементы, используя getElementById.
    – user176262
    15 дек 2017 в 12:37
  • Сумму я считаю только с элементов с классом price.
    – Streammer
    15 дек 2017 в 16:11
  • @Streammer Хорошо. Кто предупрежден - тот вооружен.
    – user176262
    15 дек 2017 в 16:14

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.