Cannot read property 'value' of null
Привет всем =)
Есть код <!DOCKTYPE HTML> <HEAD> <link href="style.css" rel="stylesheet"> </head> <body> <div id="inputs"> <input type="text" id="input1" value="1"/> <input type="text" id="input2" value="1"/> <p id="newInp"></p> </div> <button id="addInput" тфьу="Добавить покупку">Добавить покупку</button> <button id="doSum" value="сложить числа" >Сложить числа</button> <p id="line">Cумма ваших покупок</p> <div id="sum"> </div> </body> <script src="alert.js"></script>
var inputsCount = 2;
function createInput() { //создаем новые инпуты и присваиваем им id
if (inputsCount<7) {
newInp.innerHTML+= '<input value="1" id=" input' + (inputsCount + 1) + '"></input>';
inputsCount++; console.log(inputsCount)
return inputsCount;
}
else {
alert('Максимальное колличество вводов');
}
}
addInput.addEventListener('click', createInput); //добавляем инпут
function sumVar() { //считываем валью добавленных инпутов
let box = 0;
for (i = 0; i < inputsCount ; i++) { console.log(i)
box+= parseInt(document.getElementById(' input' + (i + 1) + '').value);
}
document.getElementById('sum').innerHTML = box; // в блок sum выводим сумму
}
doSum.addEventListener('click', sumVar); // Кнопка суммы
при попытке считать и просуммировать данные всех инпутов выдает ошибку переменная i = 0 . Но есть в этом цикле поставить значение i = 2. То считает сумму только добавленных инпутов. Как это исправить? Заранее спасибо за помощь. |
Вижу ошибку
Цитата:
for (let i =0; ... или for (var i =0; ... |
SaitamaSensey,
лишние пробелы строки 5 и 19 |
<div id="inputs">
<input type="text" id="input1" value="1"/>
<input type="text" id="input2" value="1"/>
</div>
<button id="addInput" title="Добавить покупку">Добавить покупку</button>
<button id="doSum" title="Сложить числа" >Сложить числа</button>
<p id="line">Cумма ваших покупок: <span id="sum"></span></p>
<script>
// Добавить инпут
document.querySelector('#addInput').addEventListener('click', function() {
let input = document.createElement('input'); // создаём инпут, а далее проставляем ему атрибуты
input.type = 'text';
input.id = 'input' + document.querySelectorAll('#inputs input').length;
input.value = 1;
document.querySelector('#inputs').appendChild(input); // Вставляем инпут в конец блока inputs
});
// Сумма
document.querySelector('#doSum').addEventListener('click', function() {
let numbers = []; // пустой массив - сюда будем добавлять значения из инпутов
// все инпуты
let allInputs = document.querySelectorAll('#inputs input');
// Собираем значения из всех инпутов и добавляем их в массив numbers
document.querySelectorAll('#inputs input').forEach(el => numbers.push(+el.value));
console.log(numbers);
// Сумма всех инпутов
let summa = numbers.reduce((acc, element) => acc + element);
document.querySelector('#sum').innerText = summa;
});
</script>
|
<button id="addInput" title="Добавить покупку">Добавить покупку</button>
<button id="doSum" title="Сложить числа">Сложить числа</button>
<p id="line">Сумма ваших покупок: <span id="sum"></span></p>
<div id="inputs"></div>
<script>
function createInput() {
if(inputs.children.length >= 6) return alert("Максимальное количество вводов = 6");
let input = document.createElement("input");
input.value = 1;
inputs.appendChild(input);
calculateTotal();
}
function calculateTotal() {
const total = Array.from(inputs.children)
.reduce((total, input) => total + Number(input.value), 0);
sum.textContent = total;
}
for(let i = 0; i < 2; i++)
createInput();
addInput.addEventListener("click", createInput);
doSum.addEventListener("click", calculateTotal);
inputs.addEventListener("input", calculateTotal);
</script>
Цитата:
|
Ваше решение работает отлично, но цель моего поста, понять в чем проблема. Расскажу чуть подробнее. Цикл изначально работал при i =2. И было еще 2 переменные которые считывали значение первых двух инпутов. Решил убрать переменные первых двух инпутов и написать все в одну переменную. Соответственно i = 0. И вот тут возниула ошибка. Почему?
|
Цитата:
Цитата:
|
Цитата:
|
| Часовой пояс GMT +3, время: 18:16. |