Ссылка Ошибка при использовании onclick на сайте codeandbox - PullRequest
Новая
       10

Ссылка Ошибка при использовании onclick на сайте codeandbox

0 голосов
/ 11 января 2019

Я пишу программу 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() {

}

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

1 Ответ

0 голосов
/ 28 мая 2019

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

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

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

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