Почему обработчик событий игнорирует тег label?

Question

Вешаю обработчик на обёртку .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>

Answer 1

let confForm6 = document.querySelector('#confForm6');
let quizArray1 = document.querySelectorAll('#confForm6 .quizBox');

confForm6.addEventListener('click', e => {
  if (e.target.classList.contains('radioBtns')) {
    quizArray1.forEach(el => el.classList.remove('quizBox-mod'));
    let lbl = e.target.closest('.quizLable');
    if (lbl) {
      let box = lbl.querySelector('.quizBox');
      if (box)
        box.classList.add('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>

Answer 2

Я бы предложил вешать событие на каждый label, а не на весь родительский элемент:

let quizBox = [...document.querySelectorAll('#confForm6 .quizBox')];
let quizLable = [...document.querySelectorAll('#confForm6 .quizLable')];

quizLable.forEach(el => {
  el.addEventListener('click', e => {
    quizBox.forEach(box => box.classList.remove('quizBox-mod'));
    el.querySelector('.quizBox').classList.add('quizBox-mod');
  });
});

БЛОГ НА HUSL

Почему обработчик событий игнорирует тег label?

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