HTML与JS分离文件下Uncaught TypeError等错误的解决问询

错误原因 #

1. Uncaught TypeError: Cannot set properties of null：JS脚本在<head>中加载时，<body>还未渲染，document.getElementById("count-el")无法找到目标元素，返回null，后续对countEl.innerText的赋值操作触发错误。即便添加了DOMContentLoaded监听，由于countEl是在监听回调外定义的，仍会提前获取到null。
2. Uncaught ReferenceError: increment is not defined：若脚本加载时机过早，全局函数还未注册就被onclick属性调用，会触发该错误；另外原代码中冗余的countEl.addEventListener("click", increment)操作，本质是对null绑定事件，也会加剧错误。

修正方案 #

核心思路 #

确保JS脚本在DOM元素渲染完成后再执行，同时匹配需求的按钮交互逻辑。

方案一：保留onclick属性，调整脚本位置

将JS脚本移至</body>标签前，此时DOM已完全加载，无需额外监听即可正确获取元素。

修正后的HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <link rel="stylesheet" href="./index.css"> -->
</head>
<body>
    <h1>People entered:</h1>
    <h2 id="count-el">0</h2>
    <button id="increment-btn" onclick="increment()">INCREMENT</button>
    <button id="save-btn" onclick="save()">SAVE</button>
    
    <!-- 脚本移至body末尾，确保DOM已渲染 -->
    <script src="./index.js"></script>
</body>
</html>

修正后的JS：

let count = 0;
// DOM已加载，可正确获取元素
let countEl = document.getElementById("count-el");

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

// 注释掉初始化调用，保持初始计数为0
// increment();

function save() {
    console.log(count);
    // 可选：添加记录到页面的逻辑
    // const saveEl = document.getElementById("save-el");
    // saveEl.textContent += `${count} - `;
    // count = 0;
    // countEl.innerText = 0;
}

方案二：移除onclick属性，使用事件监听器（推荐）

通过JS主动绑定事件，避免全局函数依赖，代码更模块化。

修正后的HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <link rel="stylesheet" href="./index.css"> -->
</head>
<body>
    <h1>People entered:</h1>
    <h2 id="count-el">0</h2>
    <button id="increment-btn">INCREMENT</button>
    <button id="save-btn">SAVE</button>
    
    <script src="./index.js"></script>
</body>
</html>

修正后的JS：

let count = 0;
const countEl = document.getElementById("count-el");
const incrementBtn = document.getElementById("increment-btn");
const saveBtn = document.getElementById("save-btn");

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

function save() {
    console.log(count);
}

// 绑定按钮点击事件
incrementBtn.addEventListener("click", increment);
saveBtn.addEventListener("click", save);

内容的提问来源于stack exchange，提问作者Learning corner