Вешаю обработчик на обёртку .quizLable. По задумке при клике на любой элемент лежащий внутри .quizLable к дочернему элементу .quizBox должен добавятся класс .quizBox-mod ,а совсем остальных удалятся. Но на деле почему-то обработчик не видит клик. Как заставить работать?
Ссылка на codepen https://codepen.io/RJDio/pen/wvMLjQW
let confForm6 = document.querySelector('#confForm6');
let quizArray1 = document.querySelectorAll('#confForm6 .quizBox');
let quizArray2 = document.querySelectorAll('#confForm6 .quizLable');
confForm6.addEventListener('click', e => {
if (e.target.classList.contains('quizLable')) { //Если элемент содержит класс то
for(let i = 0; i < quizArray1.length; i++){ // перебираем весь массив quizBox
quizArray1[i].classList.remove('quizBox-mod'); // и удаляем у каждого quizBox-mod
}
for(let j =0; j < e.target.children.length; j++){ // далее перебираем все дочерние элементы внутри quizLable
if(e.target.children[j].contains('quizLable'));{ // и если какой-то из детей содержит класс quizLable
e.target.children[j].classList.add('quizBox-mod'); // то добавляет к этому ребёнку класс quizBox-mod
}
}
}
})
.quizItem{
float:left;
margin-right: 10px;
}
.quizBox{
width: 100px;
height: 100px;
border:1px solid red;
}
.quizBox-mod{
border:2px solid green;
}
<form class="quizForm" id="confForm6">
<div class="quizItem">
<label for="radio-16" class="quizLable">
<div class="quizBox">
<div class="quizBoxText">До 30 000 руб.
</div>
<div class="hrLine hrLine-mod2"></div>
</div>
<input name="radioBtn" value="Широкие" class="radioBtns" id="radio-16" type="radio" tabindex="0">
</label>
</div>
<div class="quizItem">
<label for="radio-17" class="quizLable">
<div class="quizBox">
<div class="quizBoxText">До 70 000 руб.
</div>
<div class="hrLine hrLine-mod"></div>
</div>
<input name="radioBtn" value="Широкие" class="radioBtns" id="radio-17" type="radio" tabindex="0">
</label>
</div>
<div class="quizItem">
<label for="radio-18" class="quizLable">
<div class="quizBox">
<div class="quizBoxText">70 000 - 100 000 руб.
</div>
<div class="hrLine hrLine-mod"></div>
</div>
<input name="radioBtn" value="Широкие" class="radioBtns" id="radio-18" type="radio" tabindex="0">
</label>
</div>
<div class="quizItem">
<label for="radio-19" class="quizLable">
<div class="quizBox">
<div class="quizBoxText">100 000 - 200 000 руб.
</div>
<div class="hrLine hrLine-mod"></div>
</div>
<input name="radioBtn" value="Широкие" class="radioBtns" id="radio-19" type="radio" tabindex="0">
</label>
</div>
<div class="quizItem">
<label for="radio-20" class="quizLable">
<div class="quizBox">
<div class="quizBoxText">Сумма неважна, лишь бы всё нравилось.
</div>
<div class="hrLine hrLine-mod"></div>
</div>
<input name="radioBtn" value="Широкие" class="radioBtns" id="radio-20" type="radio" tabindex="0">
</label>
</div>
</form>
console.log("test");
внутри функции.