My problem is simple, I'm failing to add to a global variable in javascript using the click event. It returns a NaN oute.

var xx = 50;

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

JSFIDDLE

My problem is simple, I'm failing to add to a global variable in javascript using the click event. It returns a NaN oute.

var xx = 50;

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

JSFIDDLE

• javascript
• jquery

• This is known as Variable shadowing (Wikipedia). Variable shadowing in JavaScript (SO) – Andreas Commented Feb 24, 2017 at 14:46

6 Answers 6

Because you are are declaring same variable (xx) two times

See fiddle: https://jsfiddle/1beo7mgw/2/

So, why it is returning NaN?

Because on this line var xx = xx + 10; variable xx is defined again but not initialized with any value followed by the addition of 10.

So var xx will hold undefined and adding 10 on undefined will return not a number (NaN)

You could skip the var statement inside of the function. Then the global variable xx will be used.

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

In your code because your using same name to define variable in the global scope and function scope the problem occurs. In this code at function level - var xx = xx + 10; you try to redefine the xx variable with var but forgot to reinitialize it so default it will be undefined for variables without initialization and you add 10 to it where undefined + 10 will be not a numver (NAN)

There are two approaches,

1. Best approach is using ES6 version of Javascript, It has added two features let and const eliminating var. const are immutable, even if u try to mutate it after initializing it give error. let only gets valid within the scope it gets defined, for e.g. if you define a let variable within a loop it belongs to the loop only outsiders cannot access it. Below code i have changed 50 value initialization as a const and i have used let in the addition process

const xx = 50;

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

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

2. Simply change the variable name and make-sure you have two different variable names defined in both places below code shows that illustration

var xx = 50;

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

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

window.xx = 50;

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

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

However, you should be careful with the global variables to avoid conflicts, http://www.javascripttoolbox./bestpractices/#namespace

Read up on variable "scope":

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

The global scope is outside of your function, so declaring "xx" outside the function means anything in your code can see it. The local scope is inside your function, so declaring "xx" inside the function means anything inside your function can see it. However since you've declared it globally and locally, the local one overrides the global one, inside the function.

You have two variables with the same name. One is global and another one is local. There is no value being assigned to the local variable. Are you trying to add where xx = 50 to the local variable? Then you can replace the line var xx = xx + 10; to xx += 10; This will work.