jS：在单击功能时将数字添加到变量 - 给出 NaN

Question

我的问题很简单，我无法使用 click 事件添加到 javascript 中的全局变量。它返回一个NaN 结果。

var xx = 50;

$('div').click(function(){
  var xx = xx + 10;
  alert(xx)
});

JSFIDDLE

Answer 1

因为你要声明同一个变量 (xx) 两次

见小提琴：https://jsfiddle.net/1beo7mgw/2/

那么，为什么它会返回 NaN？

因为在这一行上var xx = xx + 10; 变量xx 被再次定义，但没有用任何值初始化，然后加上10。

所以var xx 将保持undefined 并且在未定义上添加 10 将返回不是数字 (NaN)

Answer 2

您可以跳过函数内部的var statement。然后将使用全局变量xx。

$('div').click(function() {
    xx = xx + 10;
    //^ without var
   alert(xx);
});

Answer 3

在您的代码中，因为您在全局范围和函数范围内使用相同的名称定义变量，所以会出现问题。在此函数级别的代码中 - var xx = xx + 10; 您尝试使用 var 重新定义 xx 变量，但忘记重新初始化它，因此默认情况下它将为 undefined 用于未初始化的变量，您在其中添加 10 undefined + 10不是数字（NAN）

有两种方法，

1. 最好的方法是使用 ES6 版本的 Javascript，它增加了两个功能 let 和 const 消除了 var。 const 是不可变的，即使您在初始化后尝试对其进行变异也会出错。 let 仅在其定义的范围内有效，例如如果你在循环中定义了一个 let 变量，它属于循环，只有外人无法访问它。下面的代码我已将50 值初始化更改为const，并且我在添加过程中使用了let

const xx = 50;

$('div').click(function(){
let yy = xx + 10;
alert(yy)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
click
</div>

1. 只需更改变量名并确保在下面的代码显示的两个地方都定义了两个不同的变量名，插图显示

var xx = 50;

$('div').click(function(){
var yy = xx + 10;
alert(yy)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
click
</div>

Answer 4

window.xx = 50;

$('div').click(function(){
  window.xx = window.xx + 10;
  alert(window.xx)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>click</div>

但是，你应该小心全局变量以避免冲突，http://www.javascripttoolbox.com/bestpractices/#namespace

Answer 5

阅读变量“范围”：

https://www.w3schools.com/js/js_scope.asp

全局作用域在函数的外部，因此在函数外部声明“xx”意味着代码中的任何内容都可以看到它。本地作用域在你的函数inside，所以在函数内部声明“xx”意味着你的函数内部的任何东西都可以看到它。但是，由于您已在全局和本地声明它，因此在函数内部，本地覆盖全局。

Answer 6

您有两个同名的变量。一个是全局的，另一个是本地的。没有为局部变量赋值。您是否尝试将 where xx = 50 添加到局部变量？然后你可以替换行 var xx = xx + 10;至 xx += 10； 这将起作用。