Why does this code only work when the variables are inside the function?
Question
Why does this function only works when variables are redeclared inside them? Aren't global variables supposed to be reachable in the whole document? My script tag is placed before body tag ending, so i dont think this is a loading problem
var caixa = document.getElementById('idtxt').value;
var caracteres = caixa.length;
var calculadora = document.getElementsByClassName('contagem');
function algebra(){
var caixa = document.getElementById('idtxt').value;
var caracteres = caixa.length;
var mat = (200 - (caracteres));
calculadora[0].innerHTML = mat;
}
caixao.addEventListener('keydown',algebra, false );
<!DOCTYPE html>
<html>
<head>
<meta name="testenv" content="outro-teste" />
<link rel="stylesheet" type="text/css" href="css/jstest.css" />
<title>novo JS</title>
</head>
<body>
<form class="" action="index.html" method="post">
<label for="idtxt"> Escreva aqui seu texto:</label></br>
<textarea id = "idtxt" maxlength:"200";></textarea>
<div class="contagem">
</div>
</form>
<script src="js/jquery-3.5.0.min.js"></script>
<script type="text/javascript" src="js/jsnv.js"></script>
</body>
</html>
2 answers
solution1
0 2020-05-06 22:12:51
You are writing the variable again once inside the function so you are overwriting it
var calculadora = document.getElementsByClassName('contagem');
algebra(calculadora);
function algebra(calculadora){
var caixa = document.getElementById('idtxt').value;
var caracteres = caixa.length;
var mat = (200 - (caracteres));
calculadora[0].innerHTML = mat;
}
caixao.addEventListener('keydown',algebra, false );
solution2
0 ACCPTED 2020-05-06 22:16:25
Access to the variables is not the problem.
var caixa = document.getElementById('idtxt').value;
var caracteres = caixa.length;
This code fetches the value of a text field, and checks how many characters are in that value.
The problem is that in the global scope those variables are set only when the page loads. So the text field has nothing in, and so 0 is stored in var caracteres = caixa.length;
Later, the keydown handler fires, and caracteres is still zero because you haven't checked the current value of the text field.
It works when you move the values to the function because you are fetching the current value of the text field, and checking its length on every single keydown event.
So you can store the items that wont change in the global scope, but them items that will change each time your function is run should go in the function scope.
var idtxt = document.getElementById('idtxt');
var calculadora = document.getElementsByClassName('contagem');
function algebra(){
var caracteres = idtxt.value.length;
var mat = (200 - (caracteres));
calculadora[0].innerHTML = mat;
}
caixao.addEventListener('keydown', algebra, false);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.