当websocket服务器在线时，button.onclick无法工作
当websocket服务器在线时，button.onclick无法工作
提问于 2021-05-08 18:45:06
这很奇怪，我有一个前端js文件和一个html文件：
const conn = new WebSocket('ws://localhost:8000');
const main = document.querySelector('.main');
const send = document.querySelector('#send');
const text = document.querySelector('#text');
conn.onopen = () => {
console.log('connetion open');
conn.send('heyya');
}
conn.onmessage = message => main.innerHTML += message.data;
conn.onerror = error => console.log('web socket not available');
send.addEventListener('click', e => {
console.log('send');
})<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script defer src="app.js"></script>
</head>
<body>
<div class="main">
<input type="text" name="" id="text">
<button id="send">Send</button>
</div>
</body>
</html>
每当websocket启动并运行时，单击send按钮什么也不做，变量send似乎并不是指html中的send按钮。但只要websocket离线，发送按钮就能正常工作。
是打字错误，还是我的其他错误，还是JS的什么问题？
回答 2
Stack Overflow用户
发布于 2021-05-08 19:02:36
conn.onmessage = message => main.innerHTML += message.data;等于
main.innerHTML = main.innerHTML + message.data会毁掉里面的一切并重新创造它。当这种情况发生时，事件绑定就消失了。您应该使用像appendChild这样的方法，或者您可以添加一个新元素来向其中注入新消息，例如：
<body>
<div class="main">
<input type="text" name="" id="text">
<button id="send">Send</button>
<ul id="messages"></ul>
</div>
</body>Stack Overflow用户
发布于 2021-05-08 19:11:27
我注意到你需要改进的一件事是：-在WebSocket上发送数据时使用conn.send(JSON.stringify('heyya'))。
并在接收时执行相同的操作：- JSON.parse(message)，然后以您想要的方式使用"message“。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67446665
复制相关文章
相似问题
腾讯云开发者
