这是我的代码：
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>我不明白为什么我的代码在添加动态按钮后不能正常工作，请帮助。为什么窗口外的console.log(btnCollection(.addEventListener((什么都不显示？
有没有更好的(最佳实践(方法来处理动态按钮的过滤？我是一个业余爱好者，所以不想问任何相关的问题，也不想详细解释这里发生了什么。谢谢你。
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);
})