Question

我已经输入了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>

任何人都知道为什么我的按钮不起作用？在我看来，除非我忽略了某些东西，否则我的所有代码都是有序的。

Answer 1

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

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

<强> jsFiddle example

Answer 2

您需要等待构建文档，然后才能引用其中的元素。

将您的脚本标记放在body中，就在结束之前。这将确保脚本运行时文档就在那里。

或者，您可以将js包装在像此

这样的加载侦听器中

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

Answer 3

您不应将<script type="text/javascript" src="index.js"></script>放在<body></body>之前，因为当浏览器尝试注册该事件时，<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>

Answer 4

有时您应该将script代码放在button

下面

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

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

Answer 5

首先，您还没有在代码中包含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");
    });
    });

这对我有用，希望这项工作也适合你

Javascript警报无法按下按钮

5 个答案: