Question

innerHTML 为空错误 [重复]

2018-05-21

325

javascript

使用 console.log 我能够看到来自另一个页面的值，但是当我使用 document.getElementById('abc').innerHTML = xyz.age; 放置此值时，它给出了错误 Uncaught TypeError: Cannot set property 'innerHTML' of null

我的 JS

xyz = JSON.parse(sessionStorage.getItem("details"));
document.getElementById('abc').innerHTML = xyz.age; //getting error from here
console.log(xyz.age);

你们能帮帮我吗

Answer 1

此示例使用您的代码有效，您可能在 dom 完全加载之前执行了脚本？尝试将您的代码包装在 document.addEventListener("DOMContentLoaded") 中：

document.addEventListener("DOMContentLoaded", function() {
  // code...
});

document.addEventListener("DOMContentLoaded", function() {
  xyz = { age: 24 }; // Mock data from localstorage
  document.getElementById('abc').innerHTML = xyz.age;
  console.log(xyz.age);
});

<div id="abc"></div>

Answer 2

问题不是 xyz，而是 document.getElementById('abc')。脚本执行时找不到 'abc'，要么是元素不存在，要么是脚本在文档准备好之前运行。

如果是后者，您可能需要在文档加载后在回调函数中执行脚本。请参阅 https://www.w3schools.com/jsref/event_onload.asp