在HTML中单击按钮时如何运行JavaScript文件？_Javascript_Html_Button_Module

在HTML中单击按钮时如何运行JavaScript文件？

javascript html button module

在HTML中单击按钮时如何运行JavaScript文件？,javascript,html,button,module,Javascript,Html,Button,Module,我用Phaser 3制作了一个游戏。我把它作为.js文件存储在我的工作目录中。我希望在我的.html索引页面上单击开始按钮时游戏开始。我做错了什么我唯一需要做的就是在点击按钮时让游戏运行，就像我在主体中包含了脚本一样 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" />  <

我用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>


电子游戏
html，正文{
保证金：0；
宽度：1000px！重要；
高度：750px！重要；
}
剧本{
宽度：1000px！重要；
高度：750px！重要；
}
var skateGame=require（'skateboarding.js'）；

通过使用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>


var myBtn=document.getElementById（'btn1'）；
myBtn.onclick=函数（）{
您的javascript代码
}

使用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>


var myBtn=document.getElementById（'btn1'）；
myBtn.onclick=函数（）{
您的javascript代码
}

告诉我它是否有效

试试这个

在.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>

让我知道这是否有效。并尝试将html和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;
      }
      #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>

让我知道这是否有效。

并尝试将html和js保存在单独的文件中。

您可能只是在

skateGame

之后缺少括号，即

onclick=“skateGame（）”

。我甚至不确定

require

是否有效。@kshetline尝试过，但没有起作用您可能只是在

skateGame

之后缺少括号，即

onclick=“滑板游戏（）“

。我甚至不确定

require

是否有效。@kshetline尝试过，但不起作用。您可能应该对此进行一点扩展--指向外部资源的链接并不能真正构成完整的答案。抱歉，我是新手^^没问题--如果您想了解有关编写答案的更多信息，请查看。欢迎来到这个网站！是的，我已经上过W3Schools，我试过了，但没用。你可能应该对此做进一步的扩展——到外部资源的链接并不是一个完整的答案。对不起，我是新的^^没问题——如果你想了解更多关于写答案的知识，复习一下可能会有用。欢迎来到这个网站！是的，我已经上过W3Schools，我试过了，但没有成功。这是我的目标，这就是为什么我要这么做，所以我没有一个1000行长的文件。我会给这一个真正的快速工作的魅力，谢谢你！有没有办法删除页面顶部显示的栏？按钮仍然在一个长长的白色酒吧里，你能分享一下按钮的快照吗。我不明白，可能与浏览器有关。@RobertSmith刚刚更新了html文件（添加了按钮样式），更新你的html，看看这是否有什么不同。这是我的目标，这就是为什么我要这样做，所以我没有一个1000行长的文件。我会给这一个真正的快速工作的魅力，谢谢你！有没有办法删除页面顶部显示的栏？按钮仍然在一个长长的白色酒吧里，你能分享一下按钮的快照吗。我不懂这个条，可能跟浏览器有关。@RobertSmith刚刚更新了html文件（为按钮添加了样式），更新你的html，看看这是否有什么不同