Можно было попроще написать, но так будет работать наверняка:
var demo = document.getElementById('demo');
var inp = document.querySelectorAll('.inp');
var check = document.querySelectorAll('.check');
var sum = 0;
for( var i = 0; i < check.length; i++ ){
(function(i){
check[i].addEventListener('change', function bubu(){
var val = inp[i].value;
sum = (this.checked) ? (sum + +val) : (sum - val);
demo.textContent = sum;
});
})(i);
}
<div>
<input class="inp" type="number" value="10">
<input class="check" type="checkbox">
</div>
<div>
<input class="inp" type="number" value="20">
<input class="check" type="checkbox">
</div>
<div>
<input class="inp" type="number" value="30">
<input class="check" type="checkbox">
</div>
<p id="demo"></p>
P.s.
• input.value достается в виде строки. Это значит, что "1" + "2" будет 12
. Чтобы не было такой ошибки, перед переменным ставят дополнительный плюсик - он превращает строку в число. Т.е. +"1" + +"2" == 3
(плюсик нужен только в случае суммирования)
• Можете поискать про разницу let и var, в частности в циклах (обертка (function(){...})(i)
следует оттуда. С let она не нужна ).
• Тернарный оператор... (условие) ? (значение при выполнении) : (значение в других случаях)
• Google → previousElementSibling
, nextElementSibling
, Делегирование событий
• "Через id нельзя..." — Можно, но не нужно))
id="test-1"
id="test-2"
id="test-3"
...
var id = document.querySelectorAll('input[id^="test"]');