为什么<h1 onload>属性中的事件处理程序不运行？

问题描述 投票：0回答：3

我正在使用 Javascript，以便为最近开始的第二学期网络课程恢复正常状态，但我在使用 getElementById 和 innerHTML 时遇到了问题。

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

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

以上内容没有改变任何内容。如果 h1 为空，结果是相同的。我还尝试使用 

<div>
来排除使用特定元素的问题。

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

javascript html
3个回答
3
投票

<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

而且，除了 

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

2
投票

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

如果您想在解析元素后立即运行某些脚本，只需在其后面添加一个 

script
元素即可：

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

-2
投票

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

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

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.