Не меняется 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, это ж инпут.