为什么此代码仅在变量位于 function 内时才有效？

Question

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

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

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

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;

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

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

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

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

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

为什么此代码仅在变量位于 function 内时才有效？

问题描述

2 个解决方案

解决方案1
0 2020-05-06 22:12:51

解决方案2
0 已采纳 2020-05-06 22:16:25

为什么此代码仅在变量位于 function 内时才有效？

问题描述

2 个解决方案

解决方案1 0 2020-05-06 22:12:51

解决方案2 0 已采纳 2020-05-06 22:16:25

解决方案1
0 2020-05-06 22:12:51

解决方案2
0 已采纳 2020-05-06 22:16:25