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

Joao•9/7/23, 7:24 PM

I think the problem is probably this line:

Joao•9/7/23, 7:25 PM

Since total is undefined, you are trying to add and something else which I is likely causing the issue. Try to initialize total to 0 an empty string or "0".

Joao•9/7/23, 7:26 PM

Yeah, if you do this on the console you'll see the same behavior:

Joao•9/7/23, 7:27 PM

You can solve this by initializing 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).

MattOP•9/7/23, 7:28 PM

Ah okay, that makes sense thank you

roelof•9/7/23, 7:33 PM

because you do

roelof•9/7/23, 7:34 PM

so the new one is added to the undefined

roelof•9/7/23, 7:34 PM

or make a check if total is undefined

roelof•9/7/23, 7:35 PM

if so do then instead of

MattOP•9/7/23, 7:36 PM

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•9/7/23, 7:36 PM

Just initialize to an empty string

Joao•9/7/23, 7:36 PM

roelof•9/7/23, 7:36 PM

Do you still do @-Matt