我正在尝试弄清楚如何让 javascript 在单独的文件中与 html 一起工作，以便我可以按照本教程进行操作 https://www.w3schools.com/howto/howto_css_modals.asp我无法弹出警报。
这是我的代码。
到目前为止，我只能得到一个不执行任何操作的按钮。
var hellobutton = document.getElementById("hello");
hellobutton.onclick = function() {
alert("Hello World")
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="/static/main.css">
<script type="text/javascript" src="/static/main.js"></script>
<title>Title</title>
</head>
<body>
<div class="content-section">
<h1>Page</h1>
<input type = "button" id="hello" value = "Say Hello" />
</div>
</body>
</html>代码在这里有效，但在我的电脑上无效。
最佳答案
它在第 2 行抛出错误，因为它找不到任何已加载该条件的元素，因此它在第 1 行返回 null。值 null 为“无”，因此您无法设置“的 onclick 事件”没有什么”。 解决此问题的一种方法是在加载 html 元素后加载 js(无需编辑 js 文件):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="/static/main.css">
<title>Title</title>
</head>
<body>
<div class="content-section">
<h1>Page</h1>
<input type = "button" id="hello" value = "Say Hello" />
</div>
<script type="text/javascript" src="/static/main.js"></script>
</body>
</html>
或者仅在加载文档时调用 js 代码(无需编辑 html 文件):
document.addEventListener('DOMContentLoaded', function() {
var hellobutton = document.getElementById("hello");
hellobutton.onclick = function() {
alert("Hello World")
}
}, false);
我找到了这段代码 here .
关于javascript - 需要帮助让 Hello World 应用程序工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56317439/