Не меняется value при смене checkbox

Я пишу калькулятор расчета

var mat1 = document.getElementById('mat-1'),
  mat2 = document.getElementById('mat-2'),
  mat3 = document.getElementById('mat-3'),
  mat4 = document.getElementById('mat-4'),
  mat5 = document.getElementById('mat-5'),
  mat6 = document.getElementById('mat-6'),
  mat = document.querySelector('.mat');

var len160 = document.getElementById('len160'),
  len180 = document.getElementById('len180'),
  len200 = document.getElementById('len200'),
  len220 = document.getElementById('len200');

var lenght = document.getElementById('lenght').value,
  columns = document.getElementById('columns').value,
  price = document.getElementById('price-value');


if (mat1.checked) {
  len160.value = 1400;
  len180.value = 1700;
  len200.value = 1780;
  len220.value = 1950;
};

if (mat2.checked) {
  len160.value = 712;
  len180.value = 823;
  len200.value = 891;
  len220.value = 950;
};

if (mat3.checked) {
  len160.value = 1954;
  len180.value = 2175;
  len200.value = 2245;
  len220.value = 2300;
};

if (mat4.checked) {
  len160.value = 1815;
  len180.value = 1995;
  len200.value = 2079;
  len220.value = 2120;
};

if (mat5.checked) {
  len160.value = 1495;
  len180.value = 1705;
  len200.value = 1888;
  len220.value = 1980;
};

if (mat6.checked) {
  len160.value = 2040;
  len180.value = 2094;
  len200.value = 2186;
  len220.value = 2258;
};


price.innerHTML = len160.value;
};


document.addEventListener("DOMContentLoaded", setValue);
range.addEventListener('input', setValue);
mine.addEventListener('change', setValue);
mat.addEventListener('click', setValue);
<div class="calc-header-2 calc-header">Высота</div>
<div class="calc-inp">
  <p><input type="checkbox" name="a" value="1" id="len160">160</p>
  <p><input type="checkbox" name="a" value="1" id="len180">180</p>
  <p><input type="checkbox" name="a" value="1" id="len200">200</p>
  <p><input type="checkbox" name="a" value="1" id="len220">220</p>
</div>

<div class="calc-group">
  <div class="calc-header">Материал</div>
  <div class="calc-inp">
    <p><input type="checkbox" name="a" id="mat-1" class="mat" value="1" checked>Профлист</p>
    <p><input type="checkbox" name="a" id="mat-2" class="mat" value="1">Сетка</p>
    <p><input type="checkbox" name="a" id="mat-3" class="mat" value="1">Поликарбонат</p>
    <p><input type="checkbox" name="a" id="mat-4" class="mat" value="1">Штакетник</p>
    <p><input type="checkbox" name="a" id="mat-5" class="mat" value="1">3D-сетка</p>
    <p><input type="checkbox" name="a" id="mat-6" class="mat" value="1">Дерево</p>
  </div>
</div>

Проблема заключается в том, что при смене чекбокса, значение в price не изменяется.
В чем может быть причина? Может из-за того, что значение len160 не перезаписывается?


Ответы (1 шт):

Автор решения: De.Minov

Код не полный, но думаю проблема кроется тут:

mat = document.querySelector('.mat');

.querySelector() возвращает первый элемент, а должен все, наверное..
Если так, то требуется использовать .querySelectorAll('.mat'), а потом пройтись по ним циклом (.forEach()) и каждому повесить слушатель.


P.s. ну и для .mat я бы использовал событие change вместо click, это ж инпут.

→ Ссылка