Question

我用javascript部分制作了一些html代码，以便可以将手机用作游戏控制器，但javascript似乎根本不执行。我尝试修复了3天，但没有找到解决方法。

这是无法运行的html代码：

在将html从我的游戏发送到客户端浏览器之前，[HOST]部分已替换为主机ip。

var left = document.querySelector('.left'),
  right = document.querySelector('.right'),
  up = document.querySelector('.up'),
  down = document.querySelector('.down'),
  msg = document.querySelector('.msg'),
  websocket = new WebSocket("ws://[HOST]:2307/", ['soap', 'xmpp']);
msg.textContent = "Script Running";
websocket.onopen = function() {
  websocket.send("Connect Controller");
  msg.textContent = "Controller connected";
};
websocket.onerror = funtion(error) {
  console.log('WebSocket Error ' + error);
  msg.textContent = error;
};
left.onclick = function(event) {
  msg.textContent = "Left";
  websocket.send("L"));
};
right.onclick = function(event) {
  msg.textContent = "Right";
  websocket.send("R"));
};
up.onclick = function(event) {
  websocket.send("U"));
};
down.onclick = function(event) {
  websocket.send("D"));
};

body {
  font-family: "Courier New", sans-serif;
  text-align: center;
  background-color:#333333;
}

.buttons {
  font-size: 4em;
  display: flex;
  justify-content: center;
}

.button {
  line-height: 1;
  padding: 2rem;
  margin: 2rem;
  border: medium solid;
  min-height: 1em;
  min-width: 1em;
}

.button {
  cursor: pointer;
  user-select: none;
}

.left {
  min-height: 4em;
  min-width: 2em;
  color: #333333
}

.right {
  min-height: 4em;
  min-width: 2em;
  color: #333333
}

.up {
  min-height: 2em;
  min-width: 2em;
  color: #333333
}

.down {
  min-height: 2em;
  min-width: 2em;
  color: #333333
}

.msg {
  color: #FFFFFF;
  min-height: 2em;
}

<div class="buttons">
  <div class="left button" style="background-color:#555555">
    <</div>
      <div class="down button" style="background-color:#555555">\/</div>
      <div class="up button" style="background-color:#555555">/\</div>
      <div class="right button" style="background-color:#555555">></div>
  </div>
  <div class="state">
    <span class="msg"><big><big><big><big><big><big>no Message</big></big></big></big></big></big></span>
  </div>

Answer 1

在修正拼写错误后，代码才有效：

拼写data.table
funtion中的)太多

我借此机会简化了代码

websocket.send(..));

window.addEventListener("load", function() {
  var msg         = document.querySelector('.msg'),
      state       = document.querySelector('.state'),
      websocket   = new WebSocket("wss://echo.websocket.org");
  msg.textContent = "Script Running";
  websocket.onopen = function() {
    websocket.send("Connect Controller");
    state.textContent = "Connect controller";
  };
  websocket.onerror = function(error) {
    console.log('WebSocket Error ' + error);
    msg.textContent = error;
  };
  websocket.onmessage = function(e) {
    state.textContent = "response:" + e.data;
  };
  document.querySelector(".buttons").addEventListener("click", function(e) {
    var but = e.target;
    if (but.classList.contains("button")) {
      var message = but.getAttribute("data-message");
      msg.textContent = message;
      websocket.send(message.slice(0, 1));
    }
  });
});

body {
  font-family: "Courier New", sans-serif;
  text-align: center;
  background-color: #333333;
}

.buttons {
  font-size: 4em;
  display: flex;
  justify-content: center;
}

.button {
  line-height: 1;
  padding: 2rem;
  margin: 2rem;
  border: medium solid;
  min-height: 1em;
  min-width: 1em;
}

.button {
  cursor: pointer;
  user-select: none;
  background-color: #555555;
  color: #333333 min-height: 4em;
  min-width: 2em;
}

.msg, .state {
  color: #FFFFFF;
  min-height: 2em;
  font-size: xx-large;
}

将html文件发送到浏览器后，javascript无法执行

1 个答案: