JavaScript onclick（）不起作用
[英]JavaScript onclick() doesnt work
问题描述
I'm trying to make a div have text put inside when clicked. 
我正在尝试使div在单击时放入文本。 But the code I use doesn't seem to work on Chrome. 但是我使用的代码似乎无法在Chrome上运行。 I'm just viewing the html document, not hosting it or anything. 我只是查看html文档，而不是托管它或任何东西。 Anyone know the reason as to why this is happening? 有人知道为什么会这样吗？
file:///c%3A/Users/Brett/Documents/1_HTML/js_practice/js_practice.html
var bob = document.getElementById("bob"); bob.onclick = function() { bob.innerHTML = "words"; };
#bob { width: 200px; height: 200px; background-color: black; color: white; }
<body> <div id="bob"></div> </body>
PS I can run the html document just fine, it's the code that's the problem PS我可以很好地运行html文档，这是代码的问题
5 个解决方案
解决方案1
6 2015-08-11 00:51:39
Wrap your Javascript code inside a window.onload event like this: 将您的Javascript代码包装在window.onload事件中，如下所示：
window.onload = function() {
var bob = document.getElementById("bob");
bob.onclick = function() {
bob.innerHTML = "words";
};
}
or load your Javascript-file at the end of the HTML file (just before the </body> ) 或将您的Javascript文件加载到HTML文件的末尾（位于</body> ）
Documentation window.onload 文档window.onload
The window.onload fires when the entire page is loaded, including its content (images, css, scripts, etc.). 加载整个页面（包括其内容（图像，css，脚本等））时，将触发window.onload。 When you load your script before the HTML is loaded it will not find the required elements on your page. 在加载HTML之前加载脚本时，它将无法在页面上找到所需的元素。 When you load the script after the HTML is loaded it will find all required elements in your HTML (if coded correctly ofcourse). 在HTML加载后加载脚本时，它将在HTML中找到所有必需的元素（当然，如果编码正确）。
解决方案2
3 2015-08-11 00:51:55
Only thing I can think of is you're running the JS before the DOM is loaded so the element doesn't exist, this will fail silently in JS. 我唯一能想到的是您在加载DOM之前正在运行JS，因此该元素不存在，这将在JS中静默失败。 The solution to this would be to place your code in a window.onload function. 解决方案是将代码放在window.onload函数中。
解决方案3
3 2015-08-11 00:58:16
You need to wrap your Javascript inside a function that is bound to the window.onload event: 您需要将Javascript包装在绑定到window.onload事件的函数中：
window.onload = function () {
// your code here
};
This is because the browser processes HTML documents top-down, so it will execute your Javascript before the element has loaded. 这是因为浏览器自上而下处理HTML文档，因此它将在元素加载之前执行Javascript。
When you bind to the onload event, it will wait for the entire page to load before executing the code, so you can guarantee that your element has been processed by the browser. 绑定到onload事件时，它将在执行代码之前等待整个页面加载，因此可以保证浏览器已经处理了您的元素。
The reason it works in the snippet in your question is because the snippet engine adds the Javascript after the body tag, and since pages are rendered top-down, your element is processed before we ever reach the Javascript. 它在您的问题的代码段中起作用的原因是因为代码段引擎在body标签之后添加了Javascript，并且由于页面是自上而下呈现的，因此您的元素在我们到达Javascript之前就已得到处理。
解决方案4
2 2015-08-11 00:49:44
Hi Decapitated Rainbow, 嗨，堕落的彩虹
I don't see any problem with it. 我没有发现任何问题。 The expected result is click on the black box and it show word with white font. 预期的结果是单击黑框，它显示带有白色字体的单词。
I'm using Google Chrome Version 44.0.2403.130 m is working fine 我正在使用Google Chrome版本44.0.2403.130 m正常工作
解决方案5
0 2015-08-11 00:55:19
You can try the jquery: 您可以尝试使用jQuery：
$('#bob').click(function(){
$("#bob").html("Changed");
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.