getElementById/InnerHTML 函数不工作答案

【问题标题】：getElementById/InnerHTML Function not WorkinggetElementById/InnerHTML 函数不工作
【发布时间】：2016-01-15 02:36:49
【问题描述】：

我正在使用 Javascript 来恢复我最近开始的第二学期网络课程的工作，但我遇到了让 getElementById 和 innerHTML 正常工作的问题。

基本上，我想用动物名称填充一个空的 h1

function favAnimal()
      {
         document.getElementById("animal").innerHTML="cat"
      }

&lt;h1 id="animal" onload="favAnimal()"&gt;Favourite Animal Placeholder&lt;/h1&gt;

以上并没有改变任何东西。如果 h1 为空，则结果相同。我还尝试使用<div> 来排除使用特定元素的问题。

感谢所有帮助，并提前致谢！

【问题讨论】：

如果我没记错的话h1 没有onload 事件。
尝试将onload="favAnimal()" 放在body 标签上。您也可以使用 innerText 而不是 innerHTML，因为您不会更改 HTML。

标签： javascript html innerhtml getelementbyid

【解决方案1】：

<h1> 标记没有 onload 事件处理程序，因此您的函数永远不会被调用。

您可以将onload 处理程序用于<body> 标记或设置一些其他事件处理程序来分配您的函数。

如果您希望在加载文档时触发您的代码，您可以使用以下之一：

window.addEventListener("load", favAnimal);       // all page resources loaded
document.addEventListener("DOMContentLoaded", favAnimal);   // HTML done parsing

如果您只想在您的<h1> 标签加载后立即执行您的脚本，您可以在标签后立即调用脚本。该页面被按顺序解析/执行，以便任何脚本始终能够引用文档中位于它之前的 HTML 元素：

<h1 id="animal">Favourite Animal Placeholder</h1>
<script>favAnimal()</script>

以下是我所知道的有load 事件的一些事情：

window
<img>
<body>
<iframe>
<link>
<script>
<embed>
<object>
<video>
<audio>
XMLHttpRequest

而且，除了<a> 之外，几乎所有其他具有src 或href 属性的HTML 标记。这个想法是，如果标签正在加载一些外部资源，那么有一个load 事件来知道它何时完成加载该外部资源。如果标签没有加载外部资源，则可能没有load 事件。

【讨论】：

HTML5 的原始规范是here，但是这种东西并不是特别容易找到。我通常使用 MDN 作为我的主要参考源或 HTML/Javascript 的东西，但这个特定的问题甚至不容易在那里找到。

【解决方案2】：

load 事件仅在资源上调度，例如文档、图像……

如果你想在一个元素被解析后运行一些脚本，只需在它后面添加一个script元素：

<script>
  function favAnimal() {
    document.getElementById("animal").innerHTML = "cat";
  }
</script>
<h1 id="animal">Favourite Animal Placeholder</h1>
<script>favAnimal()</script>

【讨论】：

【解决方案3】：

你的脚本文件在 html 呈现之前执行，这里发生了什么。因此它无法定位元素，因为它尚未呈现。浏览器提供诸如 onload ，unload 之类的事件。这里你需要onload `Document.addEventListener("DOMContentLoaded",init);

函数初始化(){ //你的代码 }`

【讨论】：