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

Question

Ссылка Ошибка при использовании onclick на сайте 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 Game не определена

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

alert("hi");

function Game() {

}

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

1

javascript codesandbox

Источник

user465053 11 янв '19 в 05:44

0 ответов

Другие вопросы по тегам javascript codesandbox

user6523757 27 май '19 в 21:46 2019-05-27 21:46 · Answer 1 · 2019-05-27 21:46

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

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

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

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