Блог

Я пытаюсь добавить событие щелчка в элемент div, но это не работает.

Ссылка на js-файл находится под тегом body, поэтому элемент divContainer уже существует. Я попытался добавить div-элемент с помощью appendChild и добавить к нему событие в консоли браузера и ит-работника.

Я не хотел добавлять полный код, но вот он. Я просто не понимаю, почему addEventListener здесь не работает.

          function DatePicker(id, callback) {
    let monthNames = ["January", "February", "March", "April", "May", "June",
        "July", "August", "September", "October", "November", "December"
    ];

    this.render = function (date) {
        let divContainer = document.getElementById(id);
        let selectedDay = date.getDay() !== 0? date.getDay() : 7;

        let prevMonth = new Date(date.getFullYear(), date.getMonth(), 1 - selectedDay);
        let month = new Date(date.getFullYear(), date.getMonth(), 1);
        let nextMonth = new Date(date.getFullYear(), date.getMonth()   1, 0);
        let firstDayInMonth = month.getDay() !== 0? month.getDay() : 7;
        let lastDayInMonth = nextMonth.getDay() !== 0? nextMonth.getDay() : 7;

        divContainer.innerHTML = '';
        divContainer.innerHTML  =
            '<div class="header"><div class="triangle-left" onclick="goPrev(this.parentElement)"></div>'  
            monthNames[date.getMonth()]   ' '   date.getFullYear()  '<div class="triangle-right" onclick="goNext(this.parentElement)"></div></div>';

        divContainer.innerHTML  =   '<div><a>Mon</a> <a>Tue</a> '  
                                    '<a>Wed</a> <a>Thu</a> <a>Fri</a>'  
                                    '<a>Sat</a> <a>Sun</a></div><hr>';

        for(let i = 0; i < firstDayInMonth - 1;   i)
        {
            divContainer.innerHTML  = '<div class="anotherMonth"  onclick="goPrev(this)">' (prevMonth.getDate()   1   i) '</div>';
        }
        for(let i = 0; i < nextMonth.getDate();   i)
        {
            if((i 1) === date.getDate()) {
                let div = document.createElement('div');
                div.classList.add('selectedDate');
                div.innerText = 1 i;
                divContainer.appendChild(div);
                div.addEventListener("click", function(){ alert("Hello World!");});
            }
            else {
                let div = document.createElement('div');
                div.classList.add('currentMonth');
                div.innerText = 1 i;
                divContainer.appendChild(div);
                div.addEventListener("click", function(){ alert("Hello World!"); });
            }
        }
        for(let i = 0; i < 7 - lastDayInMonth;   i)
        {
            divContainer.innerHTML  = '<div class="anotherMonth"  onclick="goNext(this)">' (1   i) '</div>';
        }
    };
}
 

Пока вы передаете действительный id into .getElementById() и этот элемент уже был проанализирован в DOM, код будет работать:

 // You must pass a string with a valid id
let divContainer = document.getElementById("container"); 
for(let i = 0; i < 10;   i) {
  let div = document.createElement('div');
  div.classList.add('selectedDate');
  div.textContent = 1 i;  // Use textContent. innerText is non-standard
  div.addEventListener("click", function(){ alert("Hello World!"); });
  divContainer.appendChild(div);  // Append last for better performance in many cases
} 

 <div id="container"></div> 

Ваш код при ссылке на существующий элемент работает просто отлично:

 let divContainer = document.getElementById('existing');
for(let i = 0; i < 10;   i)
{
  let div = document.createElement('div');
  div.classList.add('selectedDate');
  div.innerText = 1 i;
  divContainer.appendChild(div);
  div.addEventListener("click", function(){ alert("Hello World!"); });
} 

 <div id="existing"></div> 

Но лучше всего использовать только click обработчики <button> <a> и <input> элементы, чтобы улучшить способность программы чтения с экрана корректно работать с вашим сайтом.