Как запустить файл JavaScript при нажатии кнопки в HTML? - PullRequest
Новая
       4

Как запустить файл JavaScript при нажатии кнопки в HTML?

0 голосов
/ 30 октября 2019

Я создал игру с помощью Phaser 3. Она хранится в виде файла .js в моем рабочем каталоге. Я хочу, чтобы игра запускалась при нажатии кнопки «Пуск» на моей индексной странице .html. Что я здесь не так делаю?

Единственное, что мне нужно сделать, это запустить игру при нажатии кнопки, как если бы я включил скрипт в тело 

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8" />
    <!-- Title of our Page -->
    <title>Video Game</title>
    <!-- Phaser 3 link here -->
    <script src="//cdn.jsdelivr.net/npm/phaser@3.11.0/dist/phaser.js"></script>
    <!-- CSS For our page -->
    <style type="text/css">
        html, body {
            margin: 0;
            width: 1000px !important;
            height: 750px !important;
        }
        script {
            width: 1000px !important;
            height: 750px !important;
        }
    </style>
</head>
<body>
    <script>
        var skateGame = require('skateboarding.js');
    </script>
    <input type = "button" onclick = "skateGame" value = "Skateboarding" />

</body>
</html>

Ответы [ 2 ]

2 голосов
/ 30 октября 2019

попробуйте.

в вашем .html файле 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <!-- Title of our Page -->
    <title>Video Game</title>
    <!-- Phaser 3 link here -->
    <script src="//cdn.jsdelivr.net/npm/phaser@3.11.0/dist/phaser.js"></script>
    <!-- CSS For our page -->
    <style type="text/css">
      html,
      body {
        margin: 0;
        width: 1000px !important;
        height: 750px !important;
      }
      script {
        width: 1000px !important;
        height: 750px !important;
      }
      #startGame {
        background-color: #4caf50;
        border: none;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 4px 2px;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <input type="button" id="startGame" value="Start Game" />
    <script src="skateBoarding.js"></script>
  </body>
</html>

и в skateBoarding.js 

var startButton = document
  .querySelector("#startGame")
  .addEventListener("click", () => {
    this.startGame();
  });

// Function that start game
startGame = () => {
  console.log("Game is starting");
};

Дайте мне знать, если это работает. и попробуйте сохранить ваши HTML и JS в отдельных файлах.

0 голосов
/ 30 октября 2019

Используя onclick = "skateGame", вы просите javascript сделать что-то с var skateGame, что не имеет смысла. Попробуйте: 

 <button id="btn1" type="button"/>
<script type="text/javascript">

var myBtn= document.getElementById('btn1');

myBtn.onclick = function(){

    Your javascript code

}
</script>

Скажите, работает или нет

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...