Javascript读取一次，然后部分忽略？
Javascript读取一次，然后部分忽略？
提问于 2018-09-16 03:50:39
下面的JS在我的HTML下面的script标记中。当页面最初加载时，文件似乎可以正常工作。创建了一个通道，当我单击它时，会出现console.log语句，指示它是可操作的。然后我成功地添加了一个频道。但是，当我单击附加通道时，什么也没有发生。我从未访问过页面底部的.forEach和click eventListener --这是一个专门为多通道按钮构建的case。我尝试了各种配置，并研究了查询选择器和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});
});
});
});
})()回答 1
Stack Overflow用户
回答已采纳
发布于 2018-09-16 04:13:22
看起来您在页面加载时向通道按钮添加了单击处理程序。
这样做的问题是按钮还不存在，所以您需要遍历由var channel_buttons = document.querySelectorAll('#selectChannel');创建的空列表
(尝试在该行后面添加一个console.log(channel_buttons);，以查看列表包含的内容)
您需要在节点创建之后将事件侦听器添加到节点中(可能在node.appendChild(textnode);行后面添加类似于node.addEventListener(...)的内容)，或者使用event delegation在父按钮上放置一个单击处理程序，该处理程序将处理所有新按钮的单击。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52348304
复制相关文章
相似问题