2017-02-24 33 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>