Javascript警报不适用于按钮单击_Javascript_Html_Alert

Javascript警报不适用于按钮单击

javascript html

Javascript警报不适用于按钮单击,javascript,html,alert,Javascript,Html,Alert,我已经像你一样输入了javascript，但是在一个通过HTML文件链接的单独文件上。按钮显示，但单击时我没有收到任何警报。我的代码如下： Javascript（index.js）： HTML: Javascript很有趣！（工作时）点击有人知道为什么我的按钮坏了吗？在我看来，我所有的代码都是有序的，除非我忽略了一些东西。您的代码是在页面中存在的元素之前执行的。将JavaScript移动到文档末尾或将其包装到window.onload函数中 window.onload = functio

我已经像你一样输入了javascript，但是在一个通过HTML文件链接的单独文件上。按钮显示，但单击时我没有收到任何警报。我的代码如下：

Javascript（index.js）：

HTML:


Javascript很有趣！（工作时）
点击

有人知道为什么我的按钮坏了吗？在我看来，我所有的代码都是有序的，除非我忽略了一些东西。

您的代码是在页面中存在的元素之前执行的。将JavaScript移动到文档末尾或将其包装到window.onload函数中

window.onload = function () {
    document.getElementById("myButton").onclick = function () {
        alert("Hi");
    }
}

在引用文档中的元素之前，需要等待文档的构建

将脚本标记放在

正文

，就在结尾之前。这将确保脚本运行时文档在那里

或者，您可以像这样将js封装在负载侦听器中

window.addEventListener("load", function(){
  //...your stuff here
})

你不应该把

之前，因为当浏览器试图注册事件时，

尚未加载。因此，当您查看控制面板时，会得到类似于

TypeError:document.getElementById（…）为null的内容
正确的版本可能是
<!DOCTYPE html>
<html>
<head>
<title>Javascript is Fun!(When it works)</title>
</head>
<body>
<button id="myButton">Click</button>
</body>
<script type="text/javascript" src="index.js"></script>
</html>


Javascript很有趣！（工作时）
点击
有时，您应该将脚本
代码放在按钮下方

<button id="myButton">Click</button>

document.getElementById("myButton").onclick = function () {
    alert("Hi");
}

点击
document.getElementById（“myButton”）.onclick=function（）{
警报（“Hi”）；
}
首先，您的代码中没有包含jquery，请将HTML更改为
!DOCTYPE html>
<html>
<head>
<title>Javascript is Fun!(When it works)</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
</head>
<body>
<button id="myButton">Click</button>
</body>
<script type="text/javascript" src="index.js"></script>
</html>

这对我很有用，希望这对你也很有用
让代码更容易共存。（addEventListener
在任何先前设置的侦听器上添加事件侦听器，而.onload
取消任何先前设置的onload事件。）。我的意思是：谢谢@blex！绝对是一种更可持续的事件处理方法！
<button id="myButton">Click</button>

document.getElementById("myButton").onclick = function () {
    alert("Hi");
}

!DOCTYPE html>
<html>
<head>
<title>Javascript is Fun!(When it works)</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
</head>
<body>
<button id="myButton">Click</button>
</body>
<script type="text/javascript" src="index.js"></script>
</html>

 $(document).ready(function(){
    $('#myButton').click(function(){
        alert("Hi");
    });
    });