求助：JavaScript调用innerText时出现Cannot read properties of null报错

你遇到的这个错误是因为JavaScript代码在页面DOM元素完全加载前就执行了，导致document.getElementById("save-el")无法找到对应元素，返回了null，当你试图访问null的innerText属性时就触发了这个类型错误。

看你的HTML结构，<script src="index.js"></script>放在了<h2 id="count-el">之后，但带有save-el的<p>元素在script标签的后面——浏览器从上到下解析HTML，执行script时，save-el元素还没被解析出来，自然获取不到。

解决方法1：调整script标签位置 #

把script标签移到</body>的前面，确保所有DOM元素都加载完成后再执行JavaScript代码：

修改后的HTML代码：

<html>
<head>
<link rel="stylesheet" href="index.css">
</head>

<body>
     <h1><strong>People Entered:</strong></h1>
    <h2 id="count-el">0</h2>
<div class="container-btn">
<button id="increment-btn" onclick="increment()">INCREMENT</button>
<button id="save-btn" onclick="save()">SAVE</button>
<p id="save-el">Previous entries: </p>
</div>  
<script src="index.js"></script>
</body>

</html>

解决方法2：使用DOMContentLoaded事件（可选） #

如果不想移动script标签，可以在JavaScript代码中添加事件监听，等待DOM加载完成后再获取元素：

修改后的JavaScript代码：

let saveEl, countEl;
let count = 0;

document.addEventListener('DOMContentLoaded', function() {
    saveEl = document.getElementById("save-el")
    countEl = document.getElementById("count-el")
})

function increment(){
    count += 1 
    countEl.innerText = count
}                        

function save(){
    let countStr = count + " - "
    saveEl.innerText += countStr 
    countEl.innerText = 0
    count = 0
}

两种方法都能解决问题，第一种更简单直接，适合新手。

内容的提问来源于stack exchange，提问作者Francis Samuel