JavaScript onclick（）不起作用

Question

我正在尝试使div在单击时放入文本。 但是我使用的代码似乎无法在Chrome上运行。 我只是查看html文档，而不是托管它或任何东西。 有人知道为什么会这样吗？

文件：///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我可以很好地运行html文档，这是代码的问题

Answer 1

将您的Javascript代码包装在window.onload事件中，如下所示：

window.onload = function() {
  var bob = document.getElementById("bob");
  bob.onclick = function() {
    bob.innerHTML = "words";
  };
}

或将您的Javascript文件加载到HTML文件的末尾（位于</body> ）

文档window.onload

加载整个页面（包括其内容（图像，css，脚本等））时，将触发window.onload。 在加载HTML之前加载脚本时，它将无法在页面上找到所需的元素。 在HTML加载后加载脚本时，它将在HTML中找到所有必需的元素（当然，如果编码正确）。

Answer 2

我唯一能想到的是您在加载DOM之前正在运行JS，因此该元素不存在，这将在JS中静默失败。 解决方案是将代码放在window.onload函数中。

Answer 3

您需要将Javascript包装在绑定到window.onload事件的函数中：

window.onload = function () {
    // your code here
};

这是因为浏览器自上而下处理HTML文档，因此它将在元素加载之前执行Javascript。

绑定到onload事件时，它将在执行代码之前等待整个页面加载，因此可以保证浏览器已经处理了您的元素。

它在您的问题的代码段中起作用的原因是因为代码段引擎在body标签之后添加了Javascript，并且由于页面是自上而下呈现的，因此您的元素在我们到达Javascript之前就已得到处理。

Answer 4

嗨，堕落的彩虹

我没有发现任何问题。 预期的结果是单击黑框，它显示带有白色字体的单词。

我正在使用Google Chrome版本44.0.2403.130 m正常工作

Answer 5

您可以尝试使用jQuery：

$('#bob').click(function(){
  $("#bob").html("Changed");
});