前一段JavaScript是我向gpt问的,看起来好像没什么问题,但是在页面上没看到输入服务器的文本输入框和连接按钮,这是为什么?
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>示例网页</title>
<script>
var sockets = []; //定义WebSocket对象数组
// 连接指定的服务器
function connectToServer(serverAddress) {
// 创建一个新的WebSocket对象并将其添加到数组中
var socket = new WebSocket(serverAddress);
sockets.push(socket);
// 为新的WebSocket对象设置事件处理程序
socket.onopen = function() {
console.log("Connected to server " + serverAddress);
// 在页面上添加一个小圆点来表示连接状态
addStatusDot(serverAddress);
};
socket.onclose = function() {
console.log("Disconnected from server " + serverAddress);
// 在页面上移除连接状态小圆点
removeStatusDot(serverAddress);
};
socket.onmessage = function(event) {
console.log("Received message from server " + serverAddress + ": " + event.data);
};
}
// 发送消息到指定的服务器
function sendMessageToServer(serverAddress) {
var message = document.getElementById("message-" + serverAddress).value;
// 遍历WebSocket对象数组,找到指定服务器的对象并发送消息
for (var i = 0; i < sockets.length; i++) {
if (sockets[i].url == serverAddress) {
sockets[i].send(message);
break;
}
}
}
// 在页面上添加一个小圆点来表示连接状态
function addStatusDot(serverAddress) {
var dot = document.createElement("span");
dot.className = "status-dot";
dot.style.display = "inline-block";
dot.style.width = "10px";
dot.style.height = "10px";
dot.style.borderRadius = "50%";
dot.style.marginRight = "5px";
dot.style.backgroundColor = "green";
var serverList = document.getElementById("server-list");
var serverItem = document.createElement("li");
serverItem.textContent = serverAddress;
serverItem.appendChild(dot);
serverList.appendChild(serverItem);
}
// 在页面上移除连接状态小圆点
function removeStatusDot(serverAddress) {
var dot = document.querySelector(".status-dot");
var serverItem = dot.parentNode;
var serverList = serverItem.parentNode;
serverList.removeChild(serverItem);
}
// 在页面上添加一个服务器连接项
function addServerListItem(serverAddress) {
var serverList = document.getElementById("server-list");
var serverItem = document.createElement("li");
serverItem.textContent = serverAddress;
serverList.appendChild(serverItem);
}
</script>
<style>
.status-dot {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
margin-right: 5px;
}
</style>
<link href="juzhong.css" rel="stylesheet" type="text/css">
</head>
<body>
<table width="724" border="0">
<tr>
<td width="187"><img src="tuxiang/川信新logo.jpg" width="162" height="153"></td>
<td width="527"><h1>电子与物联网学院——智慧名牌示例</h1></td>
</tr>
</table>
<ul id="server-list">
<li>
<div>一号 <span class="status-dot"></span></div>
<input type="text" id="message-ws://serverAddress1">
<button onclick="sendMessageToServer('ws://serverAddress1')">发送</button>
</li>
<li>
<div>二号 <span class="status-dot"></span></div>
<input type="text" id="message-ws://serverAddress2">
<button onclick="sendMessageToServer('ws://serverAddress2')">发送</button>
</li>
</ul>
<script>
// 连接服务器
connectToServer("ws://serverAddress1");
connectToServer("ws://serverAddress2");
</script>
</body>
</html>
```