為什么此代碼僅在變量位於 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