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并在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）

有两种方法，

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 5

阅读变量＆＃34;范围＆＃34;：

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

全局范围是在您的函数之外，因此声明＆＃34; xx＆＃34;函数外部意味着代码中的任何内容都可以看到它。本地范围是里面你的函数，因此声明＆＃34; xx＆＃34;函数内部意味着函数内部的任何东西都可以看到它。但是，由于您已在本地全局声明和，因此本地覆盖全局。

Answer 6

这是因为当控制进入函数内部时，它首先采用局部变量，然后控制将检查全局变量。

更改函数内部的变量名称。

＆＃13;

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript">
    var x = 50
        function Show(argument) {
            // body...
            var y = x + 10;
            alert(y);
        }
    </script>
</head>
<body>

<button onclick="Show()">show</button>
</body>
</html>

＆＃13;

Answer 7

您有两个具有相同名称的变量。一个是全球性的，另一个是本地的。没有赋值给局部变量。您是否尝试将xx = 50添加到局部变量？然后你可以替换行var xx = xx + 10;到xx + = 10; 这会奏效。

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

7 个答案: