如何实现击杀怪物时累加经验值？当前出现NaN问题

嘿，我来帮你搞定这个经验累加的问题！你遇到的NaN问题其实很常见，大概率是首次累加前的初始值处理不当导致的，咱们一步步拆解：

问题根源分析 #

你说首次击杀能显示100，但后续累加失败、变量显示NaN，核心原因应该是：

• 第一次击杀前，经验span的内容是空的（或者没有默认值），你直接用parseInt/Number转换空字符串的话，会得到NaN
• 当NaN和数字（100）进行运算时，结果还是NaN，所以后续不管加多少次，都只会显示NaN

哪怕第一次你手动设置了100，也有可能后续获取span内容时，不小心拿到了带空格的字符串（比如<span> 100 </span>），或者代码逻辑里没有正确保留之前的数值。

解决方案 #

给你两种靠谱的处理方式，选哪种都能解决问题：

方式1：初始化经验值+安全转换数值 #

先给span设置初始的0值，然后每次累加时确保数值转换正确：

<!-- 先给span加初始值0 -->
<span id="exp-title-span">0</span>

// 缓存DOM元素，不用每次都重新查找，提升性能
const expSpan = document.querySelector('#exp-title-span');

function onKillMonster() {
  // 1. 获取当前经验，trim()去掉空格，parseInt指定十进制避免意外
  let currentExp = parseInt(expSpan.textContent.trim(), 10);
  // 2. 兜底处理：如果转换后是NaN（比如初始值被意外清空），就设为0
  currentExp = isNaN(currentExp) ? 0 : currentExp;
  // 3. 累加100并更新到页面
  const newExp = currentExp + 100;
  expSpan.textContent = newExp;
}

方式2：用变量存储经验值（更靠谱，避免依赖DOM内容） #

把经验值存在JS变量里，不用每次从DOM读取，这样完全避免DOM内容异常的问题：

// 初始化经验值为0
let playerExp = 0;
const expSpan = document.querySelector('#exp-title-span');

function onKillMonster() {
  // 直接累加变量
  playerExp += 100;
  // 更新到DOM
  expSpan.textContent = playerExp;
}

这种方式更稳定，因为DOM只是用来展示，真正的数值存在JS变量里，不会因为DOM内容被意外修改（比如用户手动编辑、其他代码干扰）而出问题。

为什么你之前的方法没用？ #

如果已经用了parseInt还是NaN，大概率是：

• 第一次转换时，span内容是空字符串，parseInt("")返回NaN，这时候你直接加100得到的还是NaN
• 没有处理NaN的兜底逻辑，导致后续累加一直是NaN
• 可能没有指定parseInt的第二个参数（十进制），如果遇到特殊字符（比如不小心混入的字母），也会返回NaN

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