我已经像你一样在一个单独的文件中输入了JavaScript代码，并通过HTML文件链接。按钮出现了，但是当点击它时我没有收到任何警报。我的代码如下：
Javascript(index.js):
document.getElementById("myButton").onclick = function () {
alert("Hi");
}
HTML：
<!DOCTYPE html>
<html>
<head>
<title>Javascript is Fun!(When it works)</title>
<script type="text/javascript" src="index.js"></script>
</head>
<body>
<button id="myButton">Click</button>
</body>
</html>
有人知道为什么我的按钮不起作用吗？对我来说，除非我忽略了什么，否则我的所有代码都是正确的。
您的代码在页面元素存在之前被执行。将JavaScript代码移到文档末尾或将其包装在window.onload函数中。
window.onload = function () {
document.getElementById("myButton").onclick = function () {
alert("Hi");
}
}
在您引用文档元素之前，需要等待文档构建完成。
将脚本标签放置于 body 标签中的结束标签之前。这样可以确保脚本运行时文档已经存在。
或者，您可以像这样使用加载监听器来包装您的 JavaScript 代码：
window.addEventListener("load", function(){
//...your stuff here
})
你不应该在 <body></body> 之前放置 <script type="text/javascript" src="index.js"></script>，因为当浏览器尝试注册事件时，<button> 还没有被加载。所以当你查看控制台时，你会得到类似于 TypeError: document.getElementById(...) is 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>
首先，你的代码中没有包含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>
以及你的 index.js 到
$(document).ready(function(){
$('#myButton').click(function(){
alert("Hi");
});
});
这对我有用，希望对你也有用
script 代码放在 button 下面。<button id="myButton">Click</button>
document.getElementById("myButton").onclick = function () {
alert("Hi");
}
addEventListener在之前设置的任何事件监听器基础上添加一个事件监听器，而.onload则会取消之前设置的任何onload事件。）这是我的意思：http://jsfiddle.net/v6ao73ap/ - blex