Question

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

每次单击侧面的通道链接（每次添加新通道时都会更新通道链接），我想将localStorage'channel'变量（currentChannel）更新为单击的链接的ID并加载该在服务器上调用socket.on在右侧聊天窗口中引导消息。但是，当我单击链接时，没有任何反应。

我可能会补充说，我所有的代码都在document.addEventListener（'DOMContentLoaded'，（）=> {}）中。而且，尽管在socket.on（'updatechannel'）之后生成的带有li标签的链接可以正确显示在加载的页面上，但是由于某些原因它们不会出现在源HTML中。任何帮助，在此先感谢！

完整来源：https://github.com/kylepw/project2/blob/master/static/index.js

第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);
    }
  }
});

这是我想对链接做出反应的地方（从第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); 
  });
}

Answer 1

我认为this.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); 
     });
}

动态JS频道菜单链接问题

1 个答案: