InnerHTML/TextContent 偶尔工作

Question

在过去的几天里，我一直在努力找出我的网站出了什么问题 (https://hungry-goldberg-git.netlify.app/)。产品、类、图库和联系页面都有一个从文件 (pageheader.html) 中提取的重复 header。当我加载站点并单击 links 页面 header 正确显示时，st运行ge 大约占时间的 60%。其他时候，寻呼机 header 将显示在 2 或 3 个页面上，但不会显示在其他页面上。另一件有趣的事情是，我能够点击所有 link 并第一次看到 header，当我再次点击 link 时，header 出现离开（例如，我点击产品 > 类 > 图库 > 联系人 > 类...我不会再在 header 中看到文本）。

通过查看开发人员工具，我看到了 property is set to null。我知道当脚本试图在元素呈现在页面上之前执行时会发生这种情况，但我不知道如何纠正这个问题。我的 HTML 底部已经有 <script src="/js/main.js"></script>，就在 body 结束标记之前。我还有 <body onload="titleInjection()"> 的开始 body 标记，希望 JavaScript 可以等到我的页面完全加载后再运行。但是，那没有用。

我在底部也试过<script src="/js/main.js" defer></script>，但也没用。任何人都可以阐明我做错了什么吗？

以防万一您希望查看我正在使用的所有代码，我在下面包含了部分代码。

classes.html

  <!--===================== Page Title =====================-->

  <header id="pageheader"></header>

pageheader.html

<div class="w-full mx-auto h-56 bg-img-header offset-navbar relative">
  <div class="flex flex-col items-center">
    <h1 id="sectiontext" class="font-merriweather tracking-wider text-shadow-black font-bold text-gray-300 text-center uppercase text-6xl absolute transform-center text-"></h1>
  </div>
</div>

main.js

//loads pageheader and footer on pages//
$(function() {
  $("#navigation").load("/navbar.html");
  $("#pageheader").load("/pageheader.html");
  $("#footer").load("/footer.html");
});

//replaces the text in the page header with the page's title//
var x = document.title;

function titleInjection() {
  document.getElementById("sectiontext").textContent = x;
}

***注意：我曾经在调用函数后定义变量，但我在这里看到另一个答案，建议我应该先定义它。它帮助从 1 页 header 正确加载到大约 2 - 3 页，所以我就这样离开了。我也试图通过编写 document.getElementById("sectiontext").textContent = document.title;} 来简化它，但这也没有用。

TLDR：我正在使用 innerHTML/TextContent 来更改我的网页，它只是偶尔有效。

Answer 1

.load() 是异步的。因此，当您尝试查找 sectiontext 元素时，它尚不存在，因为 .load("/pageheader.html"); 尚未完成。您应该从其回调中调用 titleInjection()。

$(function() {
  $("#navigation").load("/navbar.html");
  $("#pageheader").load("/pageheader.html", titleInjection);
  $("#footer").load("/footer.html");
});

InnerHTML/TextContent 偶尔工作

InnerHTML/TextContent Works Sporadically

javascript

debugging

jquery

innerhtml