为什么在 window.addEventListener('DOMContentLoaded', myfunction(){...}) 之后不显示按钮的实际长度？答案

【问题标题】：Why it does not show the actual length of buttons after window.addEventListener('DOMContentLoaded', myfunction(){...})?为什么在 window.addEventListener('DOMContentLoaded', myfunction(){...}) 之后不显示按钮的实际长度？
【发布时间】：2021-07-03 19:02:08
【问题描述】：

这是我的代码：

const btnList = [{
    id: 'all',
    content: 'All'
  },
  {
    id: 'br',
    content: 'Breakfast'
  },
  {
    id: 'dn',
    content: 'Dinner'
  }
]

window.addEventListener('DOMContentLoaded', () => {
  const btnz = document.getElementById('btnz');
  let newBtn = '';
  btnList.forEach(btn => {
    newBtn += `<button id="${btn.id}" class="btn-item">${btn.content}</button>`
  })
  btnz.innerHTML = newBtn;

})

const btnCollection = btnz.querySelectorAll('.btn-item');
console.log(btnCollection);
btnCollection.forEach((btn) => {
  btn.addEventListener('click', (e) => {
    const items = document.querySelectorAll('.item')
    if (e.currentTarget.id === 'all') {
      items.forEach(i => {
        i.classList.add('show')
      })
    } else if (e.currentTarget.id === 'br') {
      items.forEach(x => {
        if (x.dataset.id === 'br') {
          x.classList.add('show')
        } else {
          x.classList.remove('show')
        }
      })
    } else if (e.currentTarget.id === 'dn') {
      items.forEach(x => {
        if (x.dataset.id === 'dn') {
          x.classList.add('show')
        } else {
          x.classList.remove('show')
        }
      })
    }
  })
})

.item {
  display: none;
}

.show {
  display: block;
}

<!DOCTYPE html>
<html lang="en">

<head>
</head>

<body>
  <div class="wr">
    <h1>Menu</h1>
    <div id="btnz"></div>
    <div class="disp">
      <div class="item item1" data-id='br'>item1</div>
      <div class="item item2" data-id='dn'>item2</div>
      <div class="item item3" data-id='br'>item3</div>
      <div class="item item4" data-id='dn'>item4</div>
      <div class="item item5" data-id='br'>item5</div>
      <div class="item item6" data-id='dn'>item6</div>
      <div class="item item7" data-id='br'>item7</div>
      <div class="item item8" data-id='dn'>item8</div>
    </div>
  </div>
</body>

</html>

我不明白为什么我的代码在添加动态按钮后不能正常工作，请帮忙。为什么 window.addEventListener() 之外的 console.log(btnCollection) 什么也不显示？

有没有更好（最佳实践）的方法来处理使用动态按钮进行过滤？我是一个业余爱好者，所以不要犹豫，提出任何相关问题并详细解释这里发生的事情。之前谢谢。

【问题讨论】：

DOMContentLoaded监听函数外的代码在该函数运行之前就已经运行，所以还没有添加按钮。
把剩下的所有JS代码放在回调函数里面。
addEventListener 的全部意义在于提供一个不会立即而是在将来某个时间点提供的功能。
@Barmar 和 Chris 非常感谢你们。我花了几天时间考虑。那么，在这种情况下，您以专业的方式在做什么？你是把所有动态的东西都放在 window.addEvent.. 还是创建单独的函数？

标签： javascript html css dynamic

【解决方案1】：

window.addEventListener('DOMContentLoaded', () => {
  const btnz = document.getElementById('btnz');
  let newBtn = '';
  btnList.forEach(btn => {
    newBtn += `<button id="${btn.id}" class="btn-item">${btn.content}</button>`
  })
  btnz.innerHTML = newBtn;

  //you are calling console before this event listener been executed;
  //put it (and every method that dependes of it) inside the event listener callback
    
  const btnCollection = btnz.querySelectorAll('.btn-item');
  console.log(btnCollection);

})

【讨论】：