Question 222589 in Html Question posted in
Some basic documentation can be found here.

Html – Getting 'undefined' or 'NaN' for data-addval when trying to get is as number in JS

I’m building a simple web game and I’ve been struggling with a problem for hours. No matter how I try to access the data-addval attribute in my JavaScript code, it always returns ‘undefined’ or ‘NaN’ when it should be a number. The issue seems to be related to extracting the ‘addval’ value from an HTML input element. Below is an example of the HTML code and the relevant parts of my main.js file.

<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);
    }
}

What I’ve Tried:
I’ve attempted to retrieve the ‘addVal’ value using parseInt, Number(), and parseFloat() methods but it still returns ‘undefined’. I’ve also checked that the ‘data-addval’ attribute in the HTML code is correctly formatted, at least i think it is. I also tried multiple other ways of getting the addval from the html code but they all failed (I also tried changing the V in addval to upper-case and lower-case)

Browser Console Output:
After clicking the ‘upgrade’ button, here are the relevant console logs:

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

Any help or guidance on resolving this issue would be greatly appreciated. Thank you!

Tags:

2

Answers


  1. 0

    The issue you are facing is related to the casing of the data-addval attribute in the HTML code and how you are accessing it in your JavaScript code. In HTML, the attribute names are case-sensitive, so you must use the correct casing when accessing them with JavaScript’s dataset.

    In your HTML code, you have the attribute as data-addval, but in your JavaScript, you are trying to access it using data.addVal. JavaScript is case-sensitive as well, so you need to use the correct casing to access the attribute.

    To fix the issue, you should change the JavaScript code to use data.addval instead of data.addVal. Here’s the modified code:

    <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);
    }
}

    By using data.addval instead of data.addVal, the code will now correctly access the data-addval attribute from the HTML and parse the values as expected. This should resolve the issue of receiving ‘undefined’ or ‘NaN’ when accessing the addVal value from the HTML element.

    Login or Signup to reply.
  2. 0

    Data attributes are case-sensitive, with a dash adding an uppercase letter to the JavaScript property. You can either use:

    Number(upgradeButtonData.addval)

    with your existing code or change the attributes in your HTML to data-add-val="1" (notice the dash) to access it via .addVal. You can read more about how and why data attributes have that kind of casing here.

    You could also just use getAttribute("data-addval") or similar to access the data attributes instead.

    More on data attributes and accessing them can be found on MDN.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search