getElementById无法获取HTML元素ID，页面数值无法更新求助

核心问题分析 #

• 脚本加载时机错误：你的<script>标签放在<head>里，此时<body>中的score元素还未被浏览器解析，document.getElementById("score")会返回null，导致无法执行更新操作。
• 元素更新方式不当：使用outerHTML会替换整个<span id="score">元素，而非修改其内部的文本内容。

修正后的代码 #

HTML文件（index.html）

<!DOCTYPE html>
<head>
    <title>Clicker Game</title>
    <link rel="stylesheet" href="design.css">
</head>

<body>
    <p>Cookies: <span id="score">0</span></p>
    <img src="images/cookie.png" height="256px" width="256px">
    <!-- 将脚本移到body末尾，确保DOM加载完成后再执行JS -->
    <script src="code.js" type="text/javascript"></script>
</body>
</html>

JS文件（code.js）

var score = 0;

score = score + 1;
// 使用textContent更新元素内部文本，比innerHTML更安全
document.getElementById("score").textContent = score;

额外说明 #

• 将脚本放在</body>标签之前是确保DOM元素已加载的常用方案，对于简单场景比使用DOMContentLoaded事件监听更直观。
• textContent专门用于处理纯文本内容，避免了innerHTML可能带来的XSS安全风险，适合这类数值更新的场景。

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