为什么此JS代码不起作用？
[英]Why won't this JS code work?
问题描述
Can anyone tell me why when I use the following code, clicking on "Click Here" doesn't cause an alert? 
谁能告诉我为什么当我使用以下代码时，单击“单击此处”不会引起警报？ Is there any way to do this without adding an onClick attribute to the div tag? 有什么方法可以在不向div标签添加onClick属性的情况下执行此操作？
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>
<head>
<script type="text/javascript">
var clicker = document.getElementById("test");
clicker.onclick = test;
function test() {
alert('Test');
}
</script>
</head>
<body>
<div id="test">Click Here</div>
</body>
</html>
5 个解决方案
解决方案1
2 已采纳 2011-02-27 05:08:13
Because the element doesn't exist when you try to select it. 因为当您尝试选择元素时该元素不存在。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head></head>
<body>
<div id="test">Click Here</div>
<!-- moved the script to the end of the body element -->
<script type="text/javascript">
var clicker = document.getElementById("test");
clicker.onclick = test;
function test() {
alert('Test');
}
</script>
</body>
</html>
解决方案2
2 2011-02-27 05:08:20
Looks like the JavaScript is running before the DOM loads. 看起来JavaScript在DOM加载之前正在运行。 Try this: 尝试这个：
window.onload = function(){
var clicker = document.getElementById("test");
clicker.onclick = test;
}
解决方案3
0 2011-02-27 05:08:23
This JavaScript code gets executed before the document has loaded. 在加载文档之前，将执行此JavaScript代码。 This could be fixed by adding "onclick" as an attribute of the html tag (instead of dynamically registering it), or registering it in a function set as the "onload" attribute of the body tag. 可以通过添加“ onclick”作为html标签的属性（而不是动态注册），或将其注册在设置为body标签的“ onload”属性的功能中来解决此问题。 Also, on a somewhat separate note, why use that incredibly ancient doctype instead of the HTML5 doctype <!DOCTYPE html>? 另外，在一个单独的注释上，为什么使用令人难以置信的古老doctype代替HTML5 doctype <！DOCTYPE html>？
解决方案4
0 2011-02-27 05:14:22
The element 'test' has not been created when your JS is invoked. 调用JS时尚未创建元素“ test”。 I suggest that you use jQuery and put your code inside it's document.Ready() method. 我建议您使用jQuery，并将代码放入document.Ready（）方法中。
解决方案5
0 2011-02-27 07:36:43
hold on the answers suggested here although they are pointing out the mistake correctly they are incorrect in some ways.. 坚持这里建议的答案，尽管他们正确指出了错误，但在某些方面还是不正确的。
First of all you shouldnt have your Script tag within the body tag. 首先，您不应该在body标签中包含Script标签。 It should always be in the head. 它应该始终在头部。 you can jsut move the head tag to the end of the file. 您可以将head标记移至文件末尾。
Secondly as a web programmer you should always separate your concerns. 其次，作为网络程序员，您应该始终分开您的关注点。 Just an intro here: http://www.livestoryboard.com/Benefits/CMS-separation-of-concerns.html 这里只是一个介绍： http : //www.livestoryboard.com/Benefits/CMS-separation-of-concerns.html
Now with that in mind with respect to your program the concerns are the markup, css and script you should be having all your scripts in a separate js file and in the script tag you call document onload event and call the required function. 现在考虑到您的程序，您需要考虑的是标记，css和脚本，您应该将所有脚本放在单独的js文件中，并且在script标记中调用文档onload事件并调用所需的函数。
Hope all this makes sense 希望所有这些都有意义
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.