前一段JavaScript是我向gpt问的,看起来好像没什么问题,但是在页面上没看到输入服务器的文本输入框和连接按钮

前一段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>


```

这两个就是呀,检查一下这两个在页面有没有报错

 <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>