以下JS位于HTML下方的脚本标签中。最初加载页面时,该文件似乎可以工作。创建一个通道后,当我单击该通道时,会出现console.log语句,表明该通道正在运行。然后,我成功添加频道。但是,当我单击其他频道时,什么也没有发生。我从未到达页面底部的.forEach
和click
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});
});
});
});
})()
答案 0 :(得分:1)
页面加载时,您似乎将点击处理程序添加到了通道按钮。
此问题是按钮尚不存在,因此您正在遍历var channel_buttons = document.querySelectorAll('#selectChannel');
(尝试在该行之后放置console.log(channel_buttons);
,以查看列表中包含的内容)
您需要将事件侦听器添加到已创建的节点上(可能在node.addEventListener(...)
行之后添加node.appendChild(textnode);
,或使用event delegation在其上放置点击处理程序)父级将处理所有新按钮的点击。