Why does the variable number return an empty string when it declares it out of a function

Question

Why does the variable number return an empty string when it declares it out of a function

Navigation

#1 by (1 votes)
#2 by (0 votes)

1

When the printNumero function is called, the local variable numero does what I wanted, returns the value that was entered in the input. But the variable numero global returns an empty string, even though I have put a value in the input of it.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bingo.html</title>
</head>
<body>
<input type="text" id="numero">
<input type="submit" id="verificar" value="Adicione e verifique no Bingo!">

<script>
var numero = document.getElementById("numero").value;

function printNumero() {
    var numero = document.getElementById("numero").value;
    return numero;
};

var verificar = document.getElementById("verificar");
verificar.addEventListener("click", function() {
    console.log(numero);
});
</script>
</body>
</html>

EDIT
Why does the variable numero local (the one of the function) return the value of the input and the variable numero global returns an empty string? Remembering, without the help of the function, is the same global variable.

javascript javascript-eventos

asked by anonymous 25.11.2017 / 12:00

2 answers

1

It's just the way it is, you declare a new variable with the same name within the scope of the printNumero() function and returns it, that is, its value is treated separately from the global scope.

And with no time you call the function printNumero() by assigning its return to variable numero , the initial variable remains intact.

One possible fix would be:

verificar.addEventListener("click", function() {
    numero = printNumero();
    console.log(numero);
});

Or you can just use the variable in global scope, within the function, without redeclaring it. So:

function printNumero() {
    numero = document.getElementById("numero").value;
    return numero;
};

Then, just call it before you start, it would not be necessary to assign it.

verificar.addEventListener("click", function() {
    printNumero();
    console.log(numero);
});

EDIT:

If you do not want to use the function, just update the value inside the click event callback:

verificar.addEventListener("click", function() {
    numero = document.getElementById("numero").value;
    console.log(numero);
});

25.11.2017 / 12:05

Show Textarea Full Text in Print Deserialize Image in ASP.NET WebForm

score 0 · Accepted Answer

At the time you do this:

var numero = document.getElementById("numero").value;

You are copying the value of the field to the variable. Because the page loads this field is empty, the variable is empty. Subsequent changes in the field value do not affect the variable because the value was copied.

The simplest way to adapt your code is to save the field itself instead of its value. Since the field is an object, not a primitive value (string, number, etc.), the variable will save a reference to the field, not a copy. And you can use this reference to get the current value at any time:

var campoNumero = document.getElementById("numero");
var verificar = document.getElementById("verificar");
verificar.addEventListener("click", function() {
    console.log(campoNumero.value); // valor no momento do clique
});