0

Есть 9 классов, каждый со своим id.

<div class="hole-game">
    <div class="hole" id="hole1"></div>
    <div class="hole" id="hole2"></div>
    <div class="hole" id="hole3"></div>
    <div class="hole" id="hole4"></div>
    <div class="hole" id="hole5"></div>
    <div class="hole" id="hole6"></div>
    <div class="hole" id="hole7"></div>
    <div class="hole" id="hole8"></div>
    <div class="hole" id="hole9"></div>
</div>

Нужно используя цикл каждому назначить обработчик событий onclick, который вызывает функцию play(). У меня получился примерно такой код, но оно не работает и не могу понять почему.

let hole = document.getElementsByClassName("hole");

for(let i = 1; i < 9; i++){
   hole[i] = getHole(i);
   hole[i].onclick = play();
}

function getHole(index){
    return document.getElementById(`hole${index}`)
}
1
  • Заголовок вопроса предполагает, что классов несколько, но в представленной Вами разметке класс один - "hole". Есть 9 элементов, но с одним классом. Вы уверены, что предоставленная Вами разметка/описание правильно? Если так, то отредактируйте вопрос для однозначного описания/понимания задачи/проблемы. Помимо этого, имеет смысл рассмотреть вариант с добавлением обработчика контейнеру, а не каждому элементу (здесь или здесь более подробно).
    – XelaNimed
    28 ноя 2022 в 8:27

1 ответ 1

0

Неправильно ты, дядя Фёдор, бутерброды ешь... Для выборки по классу и дальнейшей обработки гораздо удобнее будет воспользоваться querySelectorAll() чем getElementsByClassName()

let allHole = document.querySelectorAll(".hole");
allHole.forEach(function (el, index) {
    console.log(el, el.id);
});

Если же вам неймётся работать с getElementsByClassName() то разбор массива будет выглядеть иначе

let allHole = document.getElementsByClassName("hole");
Array.prototype.forEach.call(allHole, function(el) {
    console.log(el, el.id);
});

Вместо console.log() и развешивайте события.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.