Javascript读取一次，然后部分忽略？

下面的JS位于我的HTML下面的脚本标记中。最初加载页面时，文件似乎正常工作。创建了一个通道，当我单击它时，会出现console.log语句，表明它是可操作的。然后我成功地添加了一个频道。但是，当我点击附加频道时，什么也没有发生。我从未接触过页面底部的

.forEach

和

单击
eventListener——这是一个专门为多频道按钮构建的案例。我尝试了各种配置，研究了查询选择器和forEach。我哪里做错了

(function() {


    //connect to websocket: copy must be inside request.onload for chat room to register user entry
    let socket = io.connect(location.protocol + '//' + document.domain + ':' + location.port);

    if (socket) 
        console.log("Socket connected!");

    socket.on('connect', () => {
        // track number of channels and channel names
        let channelCount = 1;
        let channelList = ["Lobby"];

        // create & display new channels added by user
        let createChannelBtn = document.querySelector('#chanlBtn');

        createChannelBtn.addEventListener('click', function(e) {

            //e.preventDefault();

            let newChannel = document.querySelector('#chanl').value;

            // add a channel if not a duplicate
            if (channelList.indexOf(newChannel) > -1) {

                document.querySelector('#chanl').value = '';

            } else {
                channelCount += 1;
                channelList.push(newChannel);

                console.log(channelList);
                console.log(channelCount);
                let textnode = document.createTextNode(newChannel);
                let node = document.createElement('button');
                node.className += 'dropdown-item';
                node.setAttribute('type', 'button');
                node.setAttribute('id', 'selectChannel');
                node.setAttribute('data-channel-', 'newChannel');
                node.appendChild(textnode);
                document.querySelector('#chanlMenu').appendChild(node);
                document.querySelector('#chanl').value = '';

            }

        });

        if (channelCount == 1) {
            var channel_button = document.querySelector('#selectChannel');
            console.log("channel 1 =" + channel_buttons);
            console.log("channelCount 1 =" + channelCount);
            channel_button.addEventListener('click', function() {
                let room = channel_button.dataset.channel;
                console.log("Inside lobby");
                socket.emit('join', {'username':localStorage.getItem('login'), 'room':room});
            });
        } 

        var channel_buttons = document.querySelectorAll('#selectChannel');


    HERE'S THE SECTION I NEVER REACH AFTER A CHANNEL BUTTON IS ADDED
            channel_buttons.forEach( channel_button => {
                channel_button.addEventListener('click', function() {
                let room = channel_button.dataset.channel;
                console.log("Sending 1 Button signal from Node List");
                //socket.emit('join', {'username':localStorage.getItem('login'), 'room':room});
            });

        });

    });

})()

页面加载时，您似乎将单击处理程序添加到频道按钮

这样做的问题是按钮还不存在，因此您正在遍历由
var channel_buttons=document.querySelectorAll（'#selectChannel'）创建的空列表

（尝试将
console.log（频道按钮）；
放在该行之后，查看列表包含的内容）

您需要在创建节点后将事件侦听器添加到节点中（可能类似于
node.addEventListener（…）
在
node.appendChild（textnode）之后）；
line，或用于在父级上放置一个单击处理程序，该处理程序将处理所有新按钮的单击。
我应该澄清，在页面加载时确实存在一个按钮，因此channelCount==1，我可以单击它，我们最终进入该块。当我创建一个频道时，它被创建，channelCount上升，但当我单击它时，没有任何变化appens.console.log语句说“[object NodeList]”。我认为这是因为您创建了新按钮，但没有向其添加单击处理程序。您向初始现有按钮添加了单击处理程序，但在创建新按钮时，没有运行代码将单击处理程序添加到新按钮。当脚本最初执行时，forEach只运行一次，而只有一个按钮存在。好的，那么你的回复仍然有效？如果是的话，我会调查一下。现在似乎有道理。JS和我还不是朋友。是的，我错了，列表是空的，它确实包含一个按钮。但我相信其余的回复是有效的。