ReferenceError при использовании onclick на веб-сайте codeandbox

Я пишу программу Vanilla JS в среде codeandbox, как показано ниже:

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>

Когда я выполняю приведенный выше фрагмент кода в codeandbox.io, он дает ошибку ниже:

ReferenceError Игра не определена

Не уверен, почему среда выполнения codeandbox не может обнаружить функцию Game. Если я напишу оператор alert вне функции, он будет успешно вызываться при загрузке страницы:

alert("hi");

function Game() {

}

Я правильно связал внешние файлы JS и CSS в теге заголовка HTML-страницы.


javascript codesandbox
person RBT    schedule 11.01.2019    source источник
comment
Мне кажется ошибкой, что компиляция функции недоступна в режиме выполнения   -  person Just code    schedule 11.01.2019

Ответы (1)


arrow_upward
2
arrow_downward

Вам необходимо определить функцию как переменную, прикрепленную к глобальному объекту window. Попробуйте определить функцию следующим образом:

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

В качестве альтернативы, вместо встроенного обработчика событий onclick попробуйте присвоить элементу table идентификатор, например game-table, а затем добавить прослушиватель событий:

document.querySelector('#game-table').addEventListener('click', Game);
person Michael    schedule 27.05.2019