JS中获取data-addval属性时返回undefined/NaN问题求助

问题出在你使用dataset访问属性时的命名错误：HTML中的data-addval属性，在dataset对象对应的属性名是**addval（全小写）**，而不是你代码里写的addVal。

原因解释 #

dataset的命名规则是将data-前缀后的kebab-case属性名转换为camelCase，但只有当属性名包含连字符时，连字符后的首字母才会大写。比如：

• data-add-val → dataset.addVal
• data-addval（无连字符）→ dataset.addval

你代码里用了upgradeButtonData.addVal，自然获取不到对应的值，返回undefined，再转成数字就变成了NaN。

修改后的代码示例 #

修正属性名

const upgradeButtonsContainer = document.querySelectorAll(".btnU");

upgradeButtonsContainer.forEach((upgradeButton) => {
    upgradeButton.addEventListener("click", (e) => {
        const upgradeButtonData = e.target.dataset;
        // 把addVal改为addval
        console.log("Before calling upgrade: addVal =", upgradeButtonData.addval);
        upgrade(parseInt(upgradeButtonData.cost), Number(upgradeButtonData.addval), parseFloat(upgradeButtonData.progress));
    });
});

额外优化：确保获取绑定事件的元素

如果按钮内部嵌套了其他元素，e.target可能指向内部元素而非按钮本身，导致依然获取不到dataset。这种情况下改用e.currentTarget（始终指向绑定事件的元素）更可靠：

const upgradeButtonsContainer = document.querySelectorAll(".btnU");

upgradeButtonsContainer.forEach((upgradeButton) => {
    upgradeButton.addEventListener("click", (e) => {
        const upgradeButtonData = e.currentTarget.dataset;
        console.log("Before calling upgrade: addVal =", upgradeButtonData.addval);
        upgrade(parseInt(upgradeButtonData.cost), Number(upgradeButtonData.addval), parseFloat(upgradeButtonData.progress));
    });
});

修改后，addval就能正确获取到HTML中data-addval的数值，后续的Number()转换也能得到有效数字，不会再出现NaN的情况。

内容的提问来源于stack exchange，提问作者Alex-GR