getElementById/InnerHTML 功能不工作

Question

我正在与 Javascript 一起玩，以重新开始我最近开始的第二学期网络 class 的工作，我运行遇到了一个问题让 getElementById 和 innerHTML 工作。

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

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

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

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

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

Answer 1

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

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

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

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

如果您只想在加载 <h1> 标记后立即执行脚本，您可以在标记后立即调用脚本。该页面按顺序 parsed/executed 以便任何脚本始终能够引用文档中出现在它之前的 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 事件。

Answer 2

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

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

Answer 3

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

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

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

getElementById/InnerHTML 功能不工作

getElementById/InnerHTML Function not Working

html

javascript

innerhtml

getelementbyid