Question

我试图让div在点击时放入文字。但我使用的代码似乎并不适用于Chrome。我只是查看html文档，而不是托管它或任何东西。任何人都知道为什么会发生这种情况的原因？

文件：///c%3A/Users/Brett/Documents/1_HTML/js_practice/js_practice.html

＆＃13;

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

＆＃13;

#bob {
  width: 200px;
  height: 200px;
  background-color: black;
  color: white;
}

＆＃13;

<body>
  <div id="bob"></div>
</body>

＆＃13;

P.S我可以正常运行html文档，它是解决问题的代码

Answer 1

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

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

或在HTML文件的末尾加载您的Javascript文件（就在</body>之前）

加载整个页面时会触发window.onload，包括其内容（图像，CSS，脚本等）。在加载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");
});