Does function work with global variables so well like local variables?

Question

When I place all the variables ( box2 , display , total , error ) in the function, the code works but when I place them outside the function, it doesn't work. I suppose it should work because all of these 4 variables are global variables and the function must recognize them (the variables). Please I would be very happy if someone could come out and explain why the code isn't working.

 var box1 = document.getElementById("box1").value; var box2 = document.getElementById("box2").value; var display = document.getElementById("display"); var total = Number(box1) + Number(box2); var error = "There is a problem with the input fields"; function cal() { if (!isNaN(box1) && !isNaN(box2)) { display.innerHTML = "$" + total; } else { display.innerHTML = error; } } 

 <h1>Best Addiction Calculator</h1> <input class="field" placeholder="type first number" type="text" id="box1"> <input class="field" placeholder="type second number" type="text" id="box2"> <button style="font-size:xx-large; color:#860EED" onClick="cal()">Calculate</button> <p id="display">i</p> 

Thank you all in advance!

Answer 1

The problem isn't where the variables are, it's when you're setting their values.

This code:

var box1 = document.getElementById("box1").value;
var box2 = document.getElementById("box2").value;

reads the value from the inputs when it runs . You want to read their values when the user clicks the button.

You could do this, but it wouldn't be reasonable:

// JUST AN EXAMPLE, DON'T ACTUALLY DO IT
var box1;
var box2;
var display;
var total;
var error;

function cal() {
    box1 = document.getElementById("box1").value;
    box2 = document.getElementById("box2").value;
    display = document.getElementById("display");
    total = Number(box1) + Number(box2);
    error = "There is a problem with the input fields";

    if (!isNaN(box1) && !isNaN(box2)) {
        display.innerHTML = "$" + total;
    } else {
        display.innerHTML = error;
    }
}

That demonstrates that the problem isn't where the variables are, but rather when you set their values.

But you wouldn't do that without a good reason. Since there's no reason for having these variables outside the function, put them in the function. In general, give a variable the most narrow scope it can have.

If looking up the elements were an expensive operation that you only wanted to do once (it isn't, getElementById is extremely fast), you could look up the elements once but then get their values within cal :

var box1 = document.getElementById("box1");              // Note no `.value` here
var box2 = document.getElementById("box2");              // Or here
var display = document.getElementById("display");

function cal() {
    var total = Number(box1.value) + Number(box2.value); // Note change on this line
    var error = "There is a problem with the input fields";

    if (!isNaN(box1) && !isNaN(box2)) {
        display.innerHTML = "$" + total;
    } else {
        display.innerHTML = error;
    }
}