Javascript 动态JS频道菜单链接问题

我正在开发一个聊天应用程序，用户可以在其中创建频道并聊天

每次单击一侧的频道链接时（每次添加新频道时，频道链接都会更新），我想将localStorage“channel”变量（currentChannel）更新为单击链接的id，并在右侧聊天窗口中使用socket.on call将该频道消息加载到服务器。但是，当我单击链接时，什么也没有发生

我可以加上我所有的代码都在一个document.addEventListener（'DOMContentLoaded'，（）=>{}）中。尽管在socket.on（'updatechannels'）之后生成的li标记链接正确地显示在加载的页面上，但由于某些原因，它们不会出现在源HTML中。提前感谢您的帮助

完整资料来源：

第85行中的代码，用于在初始化和添加新频道时更新频道链接

// Update channel list
socket.on('update channels', channels => {
  if (channels) {
    channelsList = channels;
    channelsBar.innerHTML = ``;
    for (let channel of channelsList) {
      const li = document.createElement('li');
      li.innerHTML = `<a href="#" class="selectChannel" id="${channel}">${channel}</a>`;

      channelsBar.appendChild(li);
    }
  }
});

//更新频道列表
socket.on（'updatechannels'，channels=>{
中频（信道）{
信道列表=信道；
channelsBar.innerHTML=`；
for（让通道列表的通道）{
const li=document.createElement（'li'）；
li.innerHTML=`；
channelsBar.appendChild（li）；
}
}
});

这（第155行）是我试图对链接点击做出反应的地方：

const selectChannel = document.getElementsByClassName('selectChannel');
//...
// Load clicked channel 
for (let i = 0; i < selectChannel.length; i++) {
  selectChannel[i].addEventListener('onclick', () => {
    currentChannel = this.id;
    localStorage.setItem('channel', currentChannel);
    socket.on('messages', currentChannel); 
  });
}

const selectChannel=document.getElementsByClassName（'selectChannel'）；
//...
//加载单击的频道
for（设i=0；i{
currentChannel=this.id；
setItem（'channel'，currentChannel）；
socket.on（'messages'，currentChannel）；
});
}

我认为

这个.id

不会给你预期的结果。如果检查页面上的HTML，并且频道id正确，则尝试修改

onClick

函数以接受

e

参数并从中获取id：

for (let i = 0; i < selectChannel.length; i++) {
     selectChannel[i].addEventListener('onclick', (e) => {
         let currentChannel= e.target.id; //id of the element you clicked
         localStorage.setItem('channel', currentChannel);
         socket.on('messages', currentChannel); 
     });
}

for（设i=0；i{
让currentChannel=e.target.id；//单击的元素的id
setItem（'channel'，currentChannel）；
socket.on（'messages'，currentChannel）；
});
}

谢谢你的评论，Josh。不幸的是，这不起作用。另一个注意事项：可能是因为我正在用socket.on（'updatechannels'）动态更新#channelsBar中的频道，虽然链接显示在页面上，但HTML页面源代码没有显示在那里。在

socket.on（'updatechannels'）

中，您循环频道并设置

id=“${channel}”

。你是说当你查看HTML源代码时，你没有在每个

的

id

字段中看到正确的频道id？