Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 04.08.2019, 22:19
Новичок на форуме
Отправить личное сообщение для SaitamaSensey Посмотреть профиль Найти все сообщения от SaitamaSensey
 
Регистрация: 23.07.2019
Сообщений: 4

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. То считает сумму только добавленных инпутов. Как это исправить? Заранее спасибо за помощь.
Ответить с цитированием
  #2 (permalink)  
Старый 04.08.2019, 22:25
Аватар для MC-XOBAHCK
Профессор
Отправить личное сообщение для MC-XOBAHCK Посмотреть профиль Найти все сообщения от MC-XOBAHCK
 
Регистрация: 06.08.2017
Сообщений: 473

Вижу ошибку
Сообщение от SaitamaSensey
for (i = 0;
i - это новая переменная, её нужно объявить.
for (let i =0; ...

или
for (var i =0; ...
Ответить с цитированием
  #3 (permalink)  
Старый 04.08.2019, 22:47
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,108

SaitamaSensey,
лишние пробелы строки 5 и 19
Ответить с цитированием
  #4 (permalink)  
Старый 04.08.2019, 23:04
Аватар для MC-XOBAHCK
Профессор
Отправить личное сообщение для MC-XOBAHCK Посмотреть профиль Найти все сообщения от MC-XOBAHCK
 
Регистрация: 06.08.2017
Сообщений: 473

<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>
Ответить с цитированием
  #5 (permalink)  
Старый 05.08.2019, 02:07
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

<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>


Сообщение от SaitamaSensey
считываем валью добавленных инпутов
считываем значения добавленных полей ввода

Последний раз редактировалось Malleys, 05.08.2019 в 02:17.
Ответить с цитированием
  #6 (permalink)  
Старый 05.08.2019, 02:20
Новичок на форуме
Отправить личное сообщение для SaitamaSensey Посмотреть профиль Найти все сообщения от SaitamaSensey
 
Регистрация: 23.07.2019
Сообщений: 4

Ваше решение работает отлично, но цель моего поста, понять в чем проблема. Расскажу чуть подробнее. Цикл изначально работал при i =2. И было еще 2 переменные которые считывали значение первых двух инпутов. Решил убрать переменные первых двух инпутов и написать все в одну переменную. Соответственно i = 0. И вот тут возниула ошибка. Почему?
Ответить с цитированием
  #7 (permalink)  
Старый 05.08.2019, 07:41
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,108

Сообщение от SaitamaSensey
Почему?
Сообщение от рони
лишние пробелы строки 5 и 19
Ответить с цитированием
  #8 (permalink)  
Старый 05.08.2019, 08:44
Новичок на форуме
Отправить личное сообщение для SaitamaSensey Посмотреть профиль Найти все сообщения от SaitamaSensey
 
Регистрация: 23.07.2019
Сообщений: 4

Сообщение от рони Посмотреть сообщение
@#$%!!!!! Спасибо тебе милый человек. Первый раз проглядел твое сообщение
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Парсинг рамблер кассы Sub-zerro Общие вопросы Javascript 10 19.02.2018 23:13
Cannot read property 'style' of null 4aki Элементы интерфейса 2 24.08.2017 11:30
Cannot read property 'addEventListener' of null DivMan Общие вопросы Javascript 4 15.04.2016 13:21
Помощь в преобразовании строки json dimke931 jQuery 42 28.05.2015 14:13
JavaScript error: Cannot read property 'style' of null mainne Javascript под браузер 4 03.03.2012 18:15