Kevin Powell - Community•10mo ago

Undefined Variable

I'm working on building a calculator app with little knowledge of JS (jumping into an example to force myself to learn). What I'm trying to do is take an input and add to a variable 'total'. Currently, the variable 'total' is undefined. Based on button click, it gets defined by whichever number is pressed. However, when outputting, it pre-fixes with 'undefined' despite being defined prior to output (see attachment) How could I go about fixing this?

let expression = document.querySelector(".expression");
let btns = document.querySelectorAll(".btn");
let total;

for (let i = 0; i < btns.length; i++) {
    btns[i].addEventListener("click", function (){
        if (btns[i].classList.contains("number")) {
            console.log("number");
            total = total + btns[i].id;
            expression.innerHTML = total;
        } else if (btns[i].classList.contains("operator")) {
            console.log("operator lol");
        }
    });
}

let expression = document.querySelector(".expression");
let btns = document.querySelectorAll(".btn");
let total;

for (let i = 0; i < btns.length; i++) {
    btns[i].addEventListener("click", function (){
        if (btns[i].classList.contains("number")) {
            console.log("number");
            total = total + btns[i].id;
            expression.innerHTML = total;
        } else if (btns[i].classList.contains("operator")) {
            console.log("operator lol");
        }
    });
}

12 Replies

Joao•10mo ago

I think the problem is probably this line: total = total + btns[i].id; Since total is undefined, you are trying to add undefined and something else which I is likely causing the issue. Try to initialize total to 0 an empty string or "0". Yeah, if you do this on the console you'll see the same behavior:

let a;
let b = 'some text';
console.log(a + b); // "undefinedsome text"

let a;
let b = 'some text';
console.log(a + b); // "undefinedsome text"

You can solve this by initializing total to an actual value, like an empty string since this is actually a string and not a numerical number (at least not at this point).

Matt•10mo ago

Ah okay, that makes sense thank you

roelof•10mo ago

because you do total = total + so the new one is added to the undefined or make a check if total is undefined if so do then total = instead of total +=

Matt•10mo ago

Now that I defined total to 0, it prefixes with a 0. Do I need to by default remove the first index of the input because of this ? or is there another way around it

Joao•10mo ago

Just initialize to an empty string let total = ""

roelof•10mo ago

Do you still do total += @-Matt

Matt•10mo ago

Yeah, I'm assuming it would be the same output anyways because that's just a shortcut? Make's sense I was gonna have to use string anyways to do the calculations

roelof•10mo ago

when the first input you need to overwrite . not add

Matt•10mo ago

It needs to add because of each input to do calculation as a calculator

roelof•10mo ago

Then you can better use a empty string

Matt•10mo ago

yeah im doing that now and it works 👍 i figured undefining would act similarly tbh thank you guys

roelof•10mo ago

Gaming

Programming

Undefined Variable