Javascript警报无法按下按钮
[英]Javascript alert not working on button click
问题描述
I have typed in the javascript just as you have but on a separate file linked through the HTML file. 
我已经输入了javascript，但是在通过HTML文件链接的单独文件中输入了javascript。 The button shows up however I am not getting any alert when it is clicked. 按钮显示但是单击时我没有收到任何警报。 My code is as follows: 我的代码如下：
Javascript(index.js): 使用Javascript（index.js）：
document.getElementById("myButton").onclick = function () {
alert("Hi");
}
HTML: 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>
Anyone know why my button is not working? 有谁知道为什么我的按钮不起作用？ It seems to me all my code is in order unless I am overlooking something. 在我看来，除非我忽略了某些东西，否则我的所有代码都是有序的。
5 个解决方案
解决方案1
1 2015-04-03 00:32:18
Your code is being executed prior to the element it refers to existing in the page. 您的代码在它引用页面中存在的元素之前执行。 Move the JavaScript to the end of the document or wrap it in a window.onload function. 将JavaScript移动到文档的末尾或将其包装在window.onload函数中。
window.onload = function () {
document.getElementById("myButton").onclick = function () {
alert("Hi");
}
}
解决方案2
1 2015-04-03 00:32:24
You need to wait for the document to be constructed before you can reference elements in it. 您需要等待构造文档，然后才能引用其中的元素。
Put your script tag in body , just before the end. 将脚本标记放在body ，就在结尾之前。 This will ensure that the document is there when the script runs. 这将确保脚本运行时文档就在那里。
Or, you can wrap your js in a load listener like this 或者，您可以将js包装在这样的加载侦听器中
window.addEventListener("load", function(){
//...your stuff here
})
解决方案3
0 2015-04-03 00:33:36
You should not put <script type="text/javascript" src="index.js"></script> before <body></body> , because when the browser is trying to register the event, the <button> is not loaded already. 你不应该在<body></body>之前加上<script type="text/javascript" src="index.js"></script> <body></body> ，因为当浏览器尝试注册事件时， <button>是尚未加载。 So when you take a look at the control panel, you would get something like TypeError: document.getElementById(...) is null . 因此，当您查看控制面板时，您会得到类似TypeError: document.getElementById(...) is null 。
The right version might be 版本可能是正确的
<!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>
解决方案4
0 2015-08-20 09:11:27
Sometimes you should put script code below the button 有时你应该把script代码放在button下面
<button id="myButton">Click</button>
document.getElementById("myButton").onclick = function () {
alert("Hi");
}
解决方案5
0 2018-04-15 02:51:01
first thing is you haven't included jquery in your code, change your HTML to this 首先，您没有在代码中包含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>
and your index.js to 和你的index.js到
$(document).ready(function(){
$('#myButton').click(function(){
alert("Hi");
});
});
this worked for me hope this work for you too 这对我有用，希望这也适合你
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.