Javascript全局变量不递增

Javascript Global Variables Not Incrementing

本文关键字：全局变量 Javascript      更新时间：2023-09-26

每次点击提交按钮时，我希望体验增加1。我已经将Experience声明为全局变量，但是Experience不能超过2。

<html>
<head>
<script>
var Experience = 1;
function scenario1()
{ window.Experience = window.Experience + 1 ;
    alert(window.Experience);
}
</script>
</head>
<body>
<form>
<input type="submit" onclick="scenario1()">
</form>
</body>
</html>

打开开发人员工具，查看网络选项卡。

当你点击提交按钮时，它会:

  • 运行函数
    • 重新加载页面
    • 重置变量

你需要阻止页面提交。

有两种方法。

方法1:阻止提交 
<html>
  <head>
    <script>
      var Experience = 1;
      function scenario1() {
        // Shorthand way to write it
        window.Experience++;
        alert(window.Experience);
      }
    </script>
  </head>
  <body>
  <form>
    <input type="submit" onclick="scenario1(); return false">
   </form>
  </body>
</html>
方法2:使用一个不提交 的按钮
<html>
  <head>
    <script>
      var Experience = 1;
      function scenario1() {
        // Shorthand way to write it
        window.Experience++;
        alert(window.Experience);
      }
    </script>
  </head>
  <body>
  <form>
    <button type="button" onclick="scenario1()">Do it</button>
   </form>
  </body>
</html>
<<p> 额外笔记/strong>

大量的全局变量通常是一个非常糟糕的主意。如果这是针对某种类型的游戏，你最好将所有内容放入player对象中。

var player = {
  experience: 0,
  name: "Just some guy"
};
// Grant experience
player.experience += 10;

代替

<input type="submit" onclick="scenario1()">

试试这个:

<input type="button" value="click!" onclick="scenario1()">

这实际上没有任何问题。它可以工作，你只需要不使用提交按钮。试试一个普通的输入按钮:见这里

<input type="button" onclick="scenario1()" value="Submit">
相关文章：