JavaScript实现点击按钮递增元素数值出现NaN的问题排查

• 触发NaN的根因：页面元素里的 会被解析为Unicode不间断空格\u00A0，和普通半角空格不同，parseInt()无法自动跳过字符开头的\u00A0。页面初始化时你直接取innerText调用parseInt()，遇到带\u00A0的内容会直接返回NaN，后续NaN + 1的运算结果永远是NaN，所以点击按钮始终得到非数字输出。
• 逻辑隐患：你只在页面加载时读取了一次计数器元素的内容赋值给counter变量，如果后续有其他脚本修改计数器的显示内容，内存中存储的counter值会和页面实际显示值脱节，导致计数错误。
• 冗余写法：点击回调里的counter本身已经是数值类型，额外套一层parseInt(counter)没有实际作用。

方案1：每次点击时从DOM读取最新计数值，自动过滤空格，避免值不同步问题，适合多段逻辑都会修改计数器的场景

const AddToCart = Array.from(document.getElementsByClassName("AddToCart"));

// 安全读取计数器数值，自动过滤 和普通空白字符，默认兜底值为0
const readCounter = () => {
    const el = document.getElementById("itemCounter");
    return parseInt(el.innerText.replace(/[\u00A0\s]/g, '')) || 0;
};

AddToCart.forEach(btn => {
    btn.addEventListener("click", () => {
        const count = readCounter();
        document.getElementById("itemCounter").innerText = count + 1;
    })
});

方案2：保留全局计数变量，仅初始化时做一次空格过滤，性能更好，适合只有当前逻辑修改计数器的场景

// 初始化时就过滤掉所有不间断空格和空白字符，避免初始parseInt返回NaN
var counter = parseInt(document.getElementById("itemCounter").innerText.replace(/[\u00A0\s]/g, '')) || 0;
const AddToCart = Array.from(document.getElementsByClassName("AddToCart"));

AddToCart.forEach(btn => {
    btn.addEventListener("click", () => {
        counter += 1;
        document.getElementById("itemCounter").innerText = counter;
    })
});

注意：如果你的计数器元素初始没有填充数值、只有 占位，代码里的|| 0会自动兜底为初始值0，不会出现NaN问题。

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