脚本无法从单独的文件中执行，但在 <script> 标签中运行良好

Question

下面的 JavaScript 在运行从 <script> JS </script> 标签内使用时效果完美。但是，一旦我运行来自单独文件的代码，我就会收到一个 Uncaught TypeError: cannot set 属性 of innerHTML of null。我不知道这里发生了什么。非常感谢任何帮助。

// Admin Nightmode Switch
var nmStylesheet = document.getElementById("nightmodeon");

if (localStorage.getItem("lastActiveNmSheet")) {
   nmStylesheet.setAttribute('href', localStorage.getItem('lastActiveNmSheet'));
}

if (nmStylesheet.getAttribute('href') === "view/stylesheet/elmigo_nighton.css") {
  document.getElementById("nightmode").innerHTML = "<span><i class=\"fa fa-moon-o\"></i></span>";
}

function nightmode() {
  var nmButton = document.getElementById("nightmode");
  var nmIconDay = "<span><i class=\"fa fa-sun-o\"></i></span>";
  var nmIconNight = "<span><i class=\"fa fa-moon-o\"></i></span>";

  if (nmButton.innerHTML === nmIconDay) {
    nmButton.innerHTML = nmIconNight;
    nmStylesheet.setAttribute('href', 'view/stylesheet/elmigo_nighton.css');
    localStorage.setItem('lastActiveNmSheet', 'view/stylesheet/elmigo_nighton.css');
  } else {
    nmButton.innerHTML = nmIconDay;
    nmStylesheet.setAttribute('href', '#');
    localStorage.setItem('lastActiveNmSheet', '#');
  }
}

Answer 1

您所做的是在它尝试与之交互的元素之前引用外部 JS 脚本。

当您使用 <script> 标签在外部引用 .js 脚本时，您可以设想在 script 标签所在的任何地方编写外部脚本。

JS 按顺序运行，因此如果您的外部 JS 在您更改的元素被声明/关闭之前受到尊重，它将无法识别它们。

为了解决这个问题，大多数开发人员在关闭 </body> 标记之前放置了一个 js 脚本

<html>

<body>
<script>
document.getElementById("test").innerHTML="This element has been changed"
</script>
<div id="test"> This Id wont be chaged as it is looked for before it is declared! </div>
</body>



</html>

这是在尝试与之交互的元素之前声明脚本（无论是通过文件外部脚本还是在代码中编写）的地方

<html>

<body>
<div id="test"> This Id wont be changed as it is looked for before it is declared! </div>
</body>

<script>
document.getElementById("test").innerHTML="This element has been changed"
</script>


</html>

这是在与脚本交互的元素之后声明脚本的地方

Answer 2

yow JS 代码在它们之前运行 html 项目被渲染，这就是为什么它们都是空值和东西

window.addEventListener('DOMContentLoaded', (event) => {

// Admin Nightmode Switch
var nmStylesheet = document.getElementById("nightmodeon");

if (localStorage.getItem("lastActiveNmSheet")) {
   nmStylesheet.setAttribute('href', localStorage.getItem('lastActiveNmSheet'));
}

if (nmStylesheet.getAttribute('href') === "view/stylesheet/elmigo_nighton.css") {
  document.getElementById("nightmode").innerHTML = "<span><i class=\"fa fa-moon-o\"></i></span>";
}

function nightmode() {
  var nmButton = document.getElementById("nightmode");
  var nmIconDay = "<span><i class=\"fa fa-sun-o\"></i></span>";
  var nmIconNight = "<span><i class=\"fa fa-moon-o\"></i></span>";

  if (nmButton.innerHTML === nmIconDay) {
    nmButton.innerHTML = nmIconNight;
    nmStylesheet.setAttribute('href', 'view/stylesheet/elmigo_nighton.css');
    localStorage.setItem('lastActiveNmSheet', 'view/stylesheet/elmigo_nighton.css');
  } else {
    nmButton.innerHTML = nmIconDay;
    nmStylesheet.setAttribute('href', '#');
    localStorage.setItem('lastActiveNmSheet', '#');
  }
}

});

脚本无法从单独的文件中执行，但在 <script> 标签中运行良好

Script cannot be executed from separate file but works fine from <script> tag

javascript

debugging

typeerror