1

我正在代码沙盒环境中编写一个 Vanilla JS 程序，如下所示：

function Game() {
  alert("hi");
}
body {
  font-family: sans-serif;
}

table {
  border-collapse: collapse;
}

td {
  border: 1px solid black;
}

td:first-child {
  border-left-width: 0px;
}

td:last-child {
  border-right-width: 0px;
}

table tr:nth-child(1) td {
  border-top-width: 0px;
}

table tr:nth-child(3) td {
  border-bottom-width: 0px;
}
<!DOCTYPE html>
<html>
  <head>
    <title>Tic-Tac-Toe</title>
    <meta charset="UTF-8" />
    
  </head>

  <body>
    <div id="app">
      <table width="300" height="300" onclick="Game();">
        <tr>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td></td>
          <td></td>
          <td></td>
        </tr>
      </table>
    </div>
  </body>
</html>

当我在codesandbox.io中执行上面的代码片段时，它会给出以下错误：

ReferenceError 游戏未定义

不知道为什么codesandbox的执行环境无法检测到该Game功能。如果我在函数之外编写alert语句，那么它会在页面加载时成功调用：

alert("hi");

function Game() {

}

我已经在 HTML 页面的 head 标记中正确链接了外部 JS 和 CSS 文件。

4

1 回答 1

2

您需要将函数定义为附加到全局window对象的变量。尝试像这样定义函数：

window.Game = function() {
  alert("hi");
}

或者，代替内联onclick事件处理程序，尝试给table元素一个 id，例如game-table，然后添加一个事件侦听器：

document.querySelector('#game-table').addEventListener('click', Game);
于 2019-05-27T21:46:50.903 回答