尝试获取 JS 中的数字时，获取 data-addval 的“未定义”或“NaN”

Question

我正在构建一个简单的网页游戏，并且我已经在一个问题上挣扎了几个小时。无论我如何尝试访问 JavaScript 代码中的 data-addval 属性，当它应该是数字时，它总是返回“未定义”或“NaN”。该问题似乎与从 HTML 输入元素中提取“addval”值有关。下面是 HTML 代码的示例以及我的 main.js 文件的相关部分。

<input type="button".... class="btnU" data-cost="100" data-addval="1" data-progress="0.0001"/>

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

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

function upgrade(cost, addVal, progress) {
    if (clicks >= cost) {
        console.log("Before upgrade: value =", value, "clicks =", clicks, "addVal =", addVal);

        clicks = clicks - cost;
        console.log("After deducting cost: clicks =", clicks);

        document.getElementById("score").innerHTML = clicks.toFixed(2);

        value += Number(addVal); // Convert addVal to a number using Number function
        console.log("After upgrade: value =", value);

        document.getElementById("clickValue").innerHTML = "Click Value: " + value;

        newMultiplayer = newMultiplayer + progress;
        
        console.log("After upgrading newMultiplayer =", newMultiplayer);
    }
}

我尝试过的： 我尝试使用 parseInt、Number() 和 parseFloat() 方法检索“addVal”值，但它仍然返回“未定义”。我还检查了 HTML 代码中的“data-addval”属性格式是否正确，至少我认为是这样。我还尝试了多种其他方法从html代码中获取addval，但它们都失败了（我还尝试将addval中的V更改为大写和小写）

浏览器控制台输出： 点击“升级”按钮后，以下是相关的控制台日志：

Before calling upgrade: addVal = undefined
main.js:382 Before upgrade: value = 1 clicks = 100000 addVal = NaN
main.js:385 After deducting cost: clicks = 99100
main.js:390 After upgrade: value = NaN
main.js:396 After upgrading newMultiplayer = 1.0003

任何有关解决此问题的帮助或指导将不胜感激。谢谢！

Answer 1

您面临的问题与 HTML 代码中

data-addval

属性的大小写以及您在 JavaScript 代码中访问它的方式有关。在 HTML 中，属性名称区分大小写，因此在使用 JavaScript 的

dataset

访问它们时必须使用正确的大小写。

在 HTML 代码中，属性为

data-addval

，但在 JavaScript 中，您尝试使用

data.addVal

访问它。 JavaScript 也区分大小写，因此您需要使用正确的大小写来访问该属性。

要解决此问题，您应该更改 JavaScript 代码以使用

data.addval

而不是

data.addVal

。这是修改后的代码：

<input type="button".... class="btnU" data-cost="100" data-addval="1" data-progress="0.0001"/>

JavaScript：

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

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

function upgrade(cost, addVal, progress) {
    if (clicks >= cost) {
        console.log("Before upgrade: value =", value, "clicks =", clicks, "addVal =", addVal);

        clicks = clicks - cost;
        console.log("After deducting cost: clicks =", clicks);

        document.getElementById("score").innerHTML = clicks.toFixed(2);

        value += Number(addVal);
        console.log("After upgrade: value =", value);

        document.getElementById("clickValue").innerHTML = "Click Value: " + value;

        newMultiplayer = newMultiplayer + progress;
        
        console.log("After upgrading newMultiplayer =", newMultiplayer);
    }
}

通过使用

data.addval

而不是

data.addVal

，代码现在可以正确地从 HTML 访问

data-addval

属性并按预期解析值。这应该可以解决从 HTML 元素访问

addVal

值时接收“未定义”或“NaN”的问题。

Answer 2

数据属性区分大小写，用破折号向 JavaScript 属性添加大写字母。您可以使用：

Number(upgradeButtonData.addval)

使用现有代码或将 HTML 中的属性更改为

data-add-val="1"

（注意破折号）以通过

.addVal

访问它。您可以在此处阅读有关数据属性如何以及为何具有这种大小写的更多信息。

您也可以只使用

getAttribute("data-addval")

或类似的方法来访问数据属性。

有关数据属性和访问它们的更多信息可以在 MDN 上找到。