Question

我正在codeandbox环境中编写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游戏未定义

不确定为什么codeandbox的执行环境无法检测到Game函数。如果我在函数外部编写了alert语句，那么它会在页面加载时成功调用：

alert("hi");

function Game() {

}

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

Answer 1

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

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

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

document.querySelector('#game-table').addEventListener('click', Game);

在Codesandbox网站上使用onclick时出现ReferenceError

1 个答案: