let click = document.getElementById('add-item-btn')
let cif = 0
click.onclick = () => {
cif++
let cont = document.querySelector('#container')
let div = document.createElement('div')
let c = document.createTextNode(`Element ${cif}`)
let button = document.createElement('button')
let button_text = document.createTextNode('×')
div.appendChild(c)
button.appendChild(button_text)
div.appendChild(button)
button.classList.add('button1')
div.classList.add('dialog')
cont.appendChild(div)
setTimeout(() => {
cont.removeChild(div)
}, 5000)
}
выше мы повешали обработчик на кнопку, которая есть в дом дереве, всё с ней ок.
ниже document.querySelectorAll('button') нам возвращает пустой нодлист, потому, что в момент когда этот код исполнится, добавленных кнопок на странице нет, они будут добавляться посже - по пользовательскому клику:
let click2 = document.querySelectorAll('button')
Еще строчкой ниже - ты пытаешься обработчик повешать на псевдо массив, нужно циклом вешать по кнопкам. Но так как массив в этот момент пустой, то это так же не даст результатов.
click2.onclick = () => {
Выглядит так - получили 0 элементов button, повешали на них обработчик, всё.
Далее идет работа чисто с пользовательскими кликами по главной кнопке. Мы создаем элементы баттон и добавляем на страницу. Но на этих элементах нет обработчиков, так как этот кусок кода исполнился разок и всё
let click2 = document.querySelectorAll('button')
click2.onclick = () => {
console.log(click2)
let div = document.getElementsByClassName('dialog')
div.classList.remove('dialog')
div.classList.add('vanish')
}
```
Это на вопрос - почему)
