не понимаю как работает querySelector

Question

хочу чтобы querySelector выделял все radio но он выбирает только первый

let checkbox = document.querySelectorAll('.form__checkbox');

checkbox.addEventListener('click', function (event) {
    document.getElementById('33').disabled = false;
})

<ul class="form__menu">
                    <li class="form__item" id="crapItem">
                        <input class="form__checkbox" type="radio" name="presentationTopic" id="crapRadio"><label for="crapRadio">Rap / Pop</label>
                    </li>
                    <li class="form__item">
                        <input class="form__checkbox" type="radio" name="presentationTopic" id="blackRadio"><label for="blackRadio">Black Metal</label>
                    </li>
                    <li class="form__item">
                        <input class="form__checkbox" type="radio" name="presentationTopic" id="thrashRadio"><label for="thrashRadio">Thrash Metal</label>
                    </li>
                    <li class="form__item">
                        <input class="form__checkbox" type="radio" name="presentationTopic" id="punkRadio"><label for="punkRadio">Punk</label>
                    </li>
                </ul>
                <button class="form__confirm btn" onclick="confirmMusicGenre()" id="33" disabled>Confirm!</button>

Answer 1

.querySelectorAll возвращает ноду - массив элементов.

Вот так можно повесить eventListener на каждый элемент ноды:

document.querySelectorAll('a').forEach(elem => {
  elem.addEventListener('click', ev => {
    console.log(ev.target.className)
  });
});

<a href="#" class="link-1">Нажми</a>
<a href="#" class="link-2">Нажми</a>

Вот пример конкретно для вашего случая:

let checkbox = document.querySelectorAll('.form__checkbox');

checkbox.forEach(elem => {
  elem.addEventListener('click', function(event) {
    document.getElementById('33').disabled = false;
  });
});

<ul class="form__menu">
  <li class="form__item" id="crapItem">
    <input class="form__checkbox" type="radio" name="presentationTopic" id="crapRadio"><label for="crapRadio">Rap / Pop</label>
  </li>
  <li class="form__item">
    <input class="form__checkbox" type="radio" name="presentationTopic" id="blackRadio"><label for="blackRadio">Black Metal</label>
  </li>
  <li class="form__item">
    <input class="form__checkbox" type="radio" name="presentationTopic" id="thrashRadio"><label for="thrashRadio">Thrash Metal</label>
  </li>
  <li class="form__item">
    <input class="form__checkbox" type="radio" name="presentationTopic" id="punkRadio"><label for="punkRadio">Punk</label>
  </li>
</ul>
<button class="form__confirm btn" onclick="confirmMusicGenre()" id="33" disabled>Confirm!</button>

БЛОГ НА HUSL

не понимаю как работает querySelector

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