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