Javascript全局变量未初始化

我正在制作一个从文本框中获取输入的网页((。该页面还有三个按钮，用于执行不同的功能。这些函数共享许多变量，所以我将大部分变量设置为全局变量。我的问题是，当我在文本框中输入文本并单击按钮时，函数会运行，但全局变量不会初始化，因此函数无法正常运行。在函数运行之前，我需要对变量进行初始化。我已经将代码简化为尽可能简单，以便仍然显示问题。我最初的代码有三个按钮和三个函数，这就是为什么我需要使用全局变量。

<html>
  <head>
   <body>
     <form>
     <br><input type="text" class="boxleft" placeholder="type here..." id="Age"/>
     <br> <input type="text" id="retireAge" class="boxleft" placeholder="type here..." />
     </form>
      <button id="test" onclick="CalcNW()" >Test</button>
     <script type="text/javascript">
       //global variables
       var age = document.getElementById("Age").value;
       var rage = document.getElementById("retireAge").value;
      function CalcNW() {
      var workingyears = rage - age;
      alert(workingyears);
      }
 </script>
</body>
</html>

在这个例子中，函数将不能正常工作，因为愤怒和年龄将是空的。在运行任何函数之前，是否需要初始化全局变量？

在window.onload 中包装js代码

window.onload = function(){
      var age = document.getElementById("Age").value;
      var rage = document.getElementById("retireAge").value;
      function CalcNW() {
          var workingyears = rage - age;
          alert(workingyears);
      }
}

好吧，这是一个糟糕的设计。即使您希望保持变量的全局性，也应该在函数单击时评估表单中的值。现在的情况是，javascript可能在dom完成加载之前立即填充值。此外，当您根据应用程序状态定义全局时，最好添加window.onload处理程序。玩得开心。：(

也许，你可以这样做：

age = 0;
rage  0;
function CalcNW() {
    getInput();
    var workingyears = rage - age;
    alert(workingyears);
}
function getInput(){
    age = document.getElementById("Age").value;
    rage = document.getElementById("retireAge").value;
}

        //global variables
        var age, rage;
        function CalcNW() {
            age = document.getElementById("Age").value;
            rage = document.getElementById("retireAge").value;
            var workingyears = rage - age;
            alert(workingyears);
        }

为什么不在函数外部声明变量，并在函数内部设置它们呢？

相关内容

最新更新

热门标签：