html 的 data-addval 属性在 javascript 中需通过 dataset.addval（全小写）访问，而非 addval；错误的大小写映射会导致 undefined，进而引发 nan 运算，这是前端开发中高频踩坑点。
在使用 HTML5 自定义数据属性（data-*）时，dataset API 会自动将连字符分隔的属性名转换为驼峰式（camelCase）属性，但转换规则有严格约定：data- 后首个单词小写，后续每个连字符 - 后的字母大写，其余字母全部转为小写。
例如：
- data-addval → dataset.addval（✅ 正确：无连字符，全小写）
- data-add-val → dataset.addVal（✅ 正确：-val → Val）
- data-addVal → ❌ 无效：HTML 中不允许大写字母，浏览器会忽略或标准化为小写
你遇到的问题根源正在于此：
对应 JS 中必须写作：
立即学习“Java免费学习笔记（深入）”；
const addVal = Number(upgradeButtonData.addval); // ✅ 全小写 // 而非 upgradeButtonData.addVal（❌ 不存在，返回 undefined）
✅ 正确修复方案（推荐）
方式一：保持 HTML 不变，修正 JS 访问名
upgradeButtonsContainer.forEach((upgradeButton) => {
upgradeButton.addEventListener("click", (e) => {
const { addval, cost, progress } = e.target.dataset; // 解构更清晰
console.log("addval =", addval); // "1"（字符串）
// 安全转换：优先用 Number()，parseInt() 需指定基数
const numAddVal = Number(addval);
const numCost = Number(cost);
const numProgress = parseFloat(progress);
if (!isNaN(numAddVal) && !isNaN(numCost) && !isNaN(numProgress)) {
upgrade(numCost, numAddVal, numProgress);
} else {
console.warn("Invalid data attribute value detected:", { addval, cost, progress });
}
});
});方式二：修改 HTML 属性名以匹配驼峰预期（语义更优）
此时 JS 可安全使用：
const addVal = Number(upgradeButtonData.addVal); // ✅ 因 data-add-val → addVal
⚠️ 注意事项与最佳实践
- 永远校验转换结果：Number("")、Number(null)、Number(undefined) 均返回 NaN，务必用 isNaN() 或 Number.isNaN() 判断；
- 避免 parseInt 不加基数：parseInt("10px") 返回 10（隐式截断），而 Number("10px") 返回 NaN（更严格、更安全）；
- dataset 是只读代理：修改 e.target.dataset.addval = "2" 不会同步更新 DOM 属性，如需持久化请用 element.setAttribute("data-addval", "2")；
- 调试技巧：在控制台打印 console.log(e.target.dataset) 可直观查看所有可用键名，确认实际暴露的属性名。
? 快速验证工具函数（可复用）
function getDataAsNumber(el, attrName) {
const value = el.dataset[attrName];
const num = Number(value);
return isNaN(num) ? 0 : num; // 或抛错/返回 null，按业务需求调整
}
// 使用示例
// const addVal = getDataAsNumber(upgradeButton, "addval");遵循 data-* 的命名映射规范，并辅以类型校验，即可彻底规避 undefined 和 NaN 引发的静默失败问题——这不仅是语法细节，更是构建健壮前端交互的基础防线。
