0

Создал 200 кнопок в js с data-id, после цикла for хочу сделать чтобы при нажатии на кнопки, которые красного цвета выходил alert, но, видимо, неправильно на них ссылаюсь (хотя как только уже не пробовал).

    var result3 = document.getElementById('result3');
    window.onload = function(ev) {
        for(let i=1;i<=20;i++) {
            result3.innerHTML += '<div class="numFila"><h1>'+i+'</h1></div> <br>';
            for(let j=1;j<=10;j++){
                var numRandom=Math.round(Math.random()*200)+1;  
                result3.innerHTML += '<button data-id="'+numRandom+'">'+j+'</button>'
                let buttonAsientos = document.querySelector('button[data-id="'+numRandom+'"]');
                 if(buttonAsientos.dataset.id<100){
                    buttonAsientos.style="background-color: red";
                    buttonAsientos.dataset.id="bPrueba";               
                }
            }
        }
    };
    document.querySelectorAll('button[data-id="bPrueba"]').onclick=function(ev){
        alert('esta ocupado');
    };
1
  • document.querySelectorAll('button[data-id="bPrueba"]') возвращает коллекцию элементов. Если использовать его - нужно в цикле каждому элементу коллекции вешать обработчик.
    – ksa
    21 фев в 9:31

1 ответ 1

1

Для работы с большим количеством однотипных элементов (и не только) можно использовать делегирование событий. https://learn.javascript.ru/event-delegation

document.addEventListener('DOMContentLoaded', _ => {
  document.getElementById('result3').addEventListener('click', e => {
    const v = e.target?.dataset?.id
    if (v != 'bPrueba') return
    console.log('esta ocupado')
    //alert('esta ocupado')
  })
})
<div id='result3'>
  <button data-id='bPrueba'>ok</button>
  <button data-id='tmp'>no</button>
  <button>no</button>
  <button data-id='bPrueba'>ok</button>
</div>

1
  • Спасибо вам большое, пошел изучать делигирование событий 21 фев в 9:46

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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