InnerHTML/TextContent 偶尔工作

Question

在过去的几天里，我一直试图找出我的网站出了什么问题（ https://hungry-goldberg-git.netlify.app/ ）。 产品、课程、图库和联系页面都有一个重复的 header，它从文件 (pageheader.html) 中提取。 奇怪的是，大约 60% 的时间在我加载网站并单击链接时，页面 header 会正确显示。 其他时候，寻呼机 header 将显示在 2 或 3 个页面上，但不会显示在其他页面上。 另一个有趣的事情是，我可以单击所有链接并第一次看到标题，当我再次单击链接时，header 消失（例如，我单击产品 > 课程 > 画廊 > 联系人 > 课程...我不会再看到 header 中的文字）。

通过查看开发人员工具，我看到该属性设置为 null 。 我知道当脚本在页面上呈现元素之前尝试执行时会发生这种情况，但我不知道如何纠正这个问题。 我的 HTML 底部已经有<script src="/js/main.js"></script> ，就在结束正文标记之前。 我也将我的开始正文标记添加到<body onload="titleInjection()">以希望允许 JavaScript 等到我的页面完全加载后再运行。 然而，这并没有奏效。

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

以防万一您想查看我正在使用的所有代码，我将在下面包含其中的一部分。

类.html

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

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

页眉。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;
}

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

TLDR：我正在使用 innerHTML/TextContent 来更改我的 web 页面，它只能偶尔使用。

Answer 1

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

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

InnerHTML/TextContent 偶尔工作

问题描述

1 个解决方案

解决方案1
2 已采纳 2020-07-21 01:06:13

InnerHTML/TextContent 偶尔工作

问题描述

1 个解决方案

解决方案1 2 已采纳 2020-07-21 01:06:13

解决方案1
2 已采纳 2020-07-21 01:06:13