Question

<!-- This is the HTML element -->    
<h1 id="greeting"></h1>

JS

var currentUser = localStorage.getItem("currentUser");
document.getElementById("greeting").innerHTML = "Hi " + currentUser;

以下是检查页面时发生的情况，它说：

未捕获的TypeError：无法设置属性＆＃39; innerHTML＆＃39; of null（...）

这将是整个代码文件。

＆＃13;

//mypublicwebsites.tk/artem/databases/a/load_home.js
//This isn't the complete code because I cannot use 'localStorage' in a code snippet
//excluding unneeded code
var isSignedIn = true;
//The current user, lets just say that is me
var currentUser = "Sean";
if(isSignedIn) {
  load();
} else {
  window.location.replace("index.html");
}
function logOut () {
  localStorage.setItem("isSignedIn","false");
  localStorage.setItem("currentUser", "none");
  window.location.replace("index.html");
}
function load() {
  document.querySelector(".greeting").innerHTML = "Hi " + currentUser + "!";
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
<title>Artem Inc. | Database A -> Home</title>
<script src="mypublicwebsite.tk/artem/databases/a/load_home.js"></script>
</head>
<body>
<div id="menu">
<button onclick="logOut()">Log Out</button>
</div>
<h1 class="greeting"></h1>
</body>
</html>

＆＃13;

＆＃13; 它似乎在片段中有效，但在浏览器中却没有。

好的，我会发布我找到的答案。您需要等待网页加载然后执行脚本，因此我将脚本放在关闭正文标记之前。

Answer 1

在Github上检查您的来源后，我注意到https://github.com/codecademy123/codecademy123.github.io/blob/master/artem/databases/a/home.html处没有ID为greeting的元素：

<!DOCTYPE html>
<html>
<head>
<title>Artem Inc. | Database A -> Home</title>
<script src="load_home.js"></script>
</head>
<body>
<div id="menu">
<button onclick="logOut()">Log Out</button>
</div>
<h1 class="greeting"></h1>
</body>
</html>

否id，但有一个名为class的{{1}}。

这是一个更新和简化的小提琴：
https://jsfiddle.net/tommiehansen/ndd0c7rh/2/

基本上我们只使用greeting代替document.querySelector('.greeting')，因为如果不存在，id问候语将始终返回undefined。

如果您仍想使用document.getElementById('greeting')，只需将id的源代码从home.html更改为<h1 class="greeting"></h1>即可。这里的重要部分是在您设置了类或ID之后查询DOM。因为如果你不匹配这些，它将始终返回为undefined，因为你的javascript将无法找到选择器。

为什么document.getElementById（＆＃34; greeting＆＃34;）的值为null？

1 个答案: