Question

脚本无法从单独的文件执行，但可以从 <script> 标签执行

2021-07-06

57

javascript debugging typeerror

下面的 JavaScript 在 <script> JS </script> 标记内运行时运行良好。但是，当我从单独的文件运行代码时，我收到 Uncaught TypeError：无法将 innerHTML 属性设置为 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 在您更改的元素被声明/关闭之前被尊重，它将无法识别它们。

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

<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', '#');
  }
}

});