2017-02-24 34 views
3

我的问题很简单,我无法使用click事件添加到javascript中的全局变量。它返回一个NaN结果。jS:在点击函数中添加数字给变量 - 给NaN

var xx = 50; 

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

JSFIDDLE

+0

这被称为[可变遮蔽(维基百科)](https://en.wikipedia.org/wiki/Variable_shadowing)。 [JavaScript中的变量阴影(SO)](https://stackoverflow.com/questions/5373278/variable-shadowing-in-javascript) – Andreas

回答

1

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

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

因为你的声明相同的变量(xx)两次

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

那么,为什么它返回喃?

由于在这条线var xx = xx + 10;变量xx再次但不限定与随后加入的10

任何值初始化所以var xx将持有undefined并加入10上未定义将返回不数字(NaN )

0

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

0

对变量的“范围”读了起来:

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

全球范围之外的功能,所以宣称“ xx“在函数外意味着代码中的任何内容都可以看到它。本地范围是里面的你的函数,所以在函数内声明“xx”意味着函数内部的任何东西都可以看到它。不过既然你已经在本地声明了全局的,本地的覆盖了全局函数里面的

0

这是因为当控件进入函数内部时,它先取得局部变量,然后控件将检查全局变量。

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

<!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>

0

你有两个名称相同的变量。一个是全球性的,另一个是地方性的。没有值被分配给本地变量。你是否试图将xx = 50添加到局部变量?然后你可以替换这行var xx = xx + 10;到xx + = 10; 这将工作。

1

在您的代码中,因为您在全局范围和函数范围中使用相同的名称来定义变量,所以会出现问题。在功能层面验证码 - var xx = xx + 10;你尝试用var重新定义XX变量却忘了初始化它,它默认undefined变量没有初始化,并添加10到它那里undefined + 10将不是numver(NAN)

有两种方法,

  1. 最好的办法是使用Javascript的ES6版本,还增加了两个功能letconst消除varconst是不可变的,即使你试图在初始化它后给它赋予错误以进行变异。 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>

  • 简单地改变变量的名称和确保你在两个地方定义了两个不同的变量名,代码如下
  • 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>