JS实现加减计数器时parseInt返回NaN问题排查与修复

实现目标 #

开发一个简易网页计数器，包含以下核心模块：

• 计数数值展示区域
• 「减计数」操作按钮
• 「加计数」操作按钮

开发遇到的异常 #

初版开发时，调用parseInt将id为num的DOM元素内的文本转换为数值，通过alert打印typeof检测结果，返回值为number，但变量实际值为NaN，当时无法定位问题成因。

异常原因说明 #

NaN是JavaScript中的特殊数值，用于标识数值解析/运算失败的场景，因此typeof NaN返回number是JS的标准设计，并非类型检测出错。
出现解析后为NaN的核心原因是：执行parseInt时拿到的目标DOM文本不是合法可解析的数字串，常见触发场景包括脚本加载早于DOM渲染，拿到空内容；或者元素文本夹带不可见特殊字符、多余空白，导致解析失败。

修复后完整代码 #

JS逻辑代码 #

var low = document.getElementById("low")
var add = document.getElementById("add")
low.addEventListener("click", function () {
    var num = document.getElementById("num")
    var number = parseInt(num.innerText)
    num.innerHTML = number - 1
})
add.addEventListener("click", function () {
    var num = document.getElementById("num")
    var number = parseInt(num.innerText)
    num.innerHTML = number + 1
})

HTML页面代码 #

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <link rel="stylesheet" href="style.css"> -->
</head>
<body>
    <div class="container">
        <h1>counter</h1>
        <h1 id="num">0</h1>
        <div class="btn">
            <button id="low">lower count</button>
            <button id="add">add count</button>
        </div>
    </div>
    <script src="js.js"></script>
</body>
</html>

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