为什么这段代码只有在变量在函数内部时才有效？

Question

为什么这个函数只有在其中重新声明变量时才有效？全局变量不是应该在整个文档中都可以访问吗？我的 script 标签放在 body 标签结束之前，所以我认为这不是加载问题

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>

Answer 1

您在函数内部再次写入变量，因此您正在覆盖它

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

Answer 2

访问变量不是问题。

var caixa = document.getElementById('idtxt').value;
var caracteres = caixa.length;

此代码获取文本字段的值，并检查该值中有多少个字符。

问题在于，在全局范围内，这些变量仅在页面加载时设置。所以文本字段中没有任何内容，因此 0 存储在 var caracteres = caixa.length;

中

稍后，keydown 处理程序触发，并且 caracteres 仍然为零，因为您尚未检查文本字段的当前值。

当您将值移动到函数时它起作用，因为您正在获取文本字段的当前值，并在每个 keydown 事件中检查它的长度。

因此您可以存储不会在全局范围内更改的项目，但每次函数运行时都会更改的项目应该放在函数范围内。

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

为什么这段代码只有在变量在函数内部时才有效？

Why does this code only work when the variables are inside the function?

javascript

variables

scope

function