Why does the number variable return an empty string when declaring it outside a function

Asked

Viewed 103 times

1

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

<!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 the variable numero local(a of the function) can return the input value and the variable numero global returns an empty string? Remembering, without the help of the function, is the same global variable.

javascript javascript-events

2 answers

1

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

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

A possible correction 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;
};

Hence, just call it before printing, it would not be necessary to assign.

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

EDIT:

If you don’t want to use the function just update the value inside the event callback click:

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

  • Thanks, but, what if the function did not exist and I used only the global variable I declared, what would be necessary to do so that the value does not return an empty string, or, there is no way?

  • @Thomasdota, I edited the answer ;)

  • Thank you so much for your help :)

0


At the time you do it:

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

You are copying the value of the field for the variable. As when loading the page this field is empty, the variable is empty. Later changes in the field value do not affect the variable because the value was copied.

The simplest way to adapt your code is to store the field itself instead of its value in the variable. Since the field is an object, and not a primitive value (string, number, etc), the variable will store a reference to the field, not a copy. And you can use this reference to pick up 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
});

  • Thank you very much, you helped me a lot :)

Browser other questions tagged javascript javascript-events

You are not signed in. Login or sign up in order to post.