Using var keyword when defining a variable in Javascript

Question

I read some posts here on using var keyword when defining a new variable. The posts mentioned how using var within a function creates a variable with local scope, whereas not using var keyword creates a variable with global scope. Most posts recommend that var should always be used. I have a few questions:

I am learning JS and I was trying to write a script that counts the number of times a button has been clicked (see below for the code). If in the else part of the function totalClicks I use var numclicks = 1; then the code below does not wor. If I omit the var keyword, it works. Is this because for the code to work numclicks needs to be a global variable, or is there some other reason? Is this an exception to the rule that var should always be used, or is there another way to program this.
The first time the button is clicked, the output is NaN. It is not clear to me why it is not 1? Following the logic of the code it appears that the variable is set to 1 before it is written to the document. I know this problem gets solved if I add numclick = 0; before the function statement. But it is not clear to me why this solves the problem.

Thanks very much for your help.

CODE

<html>
<head>
    <title>Count number of clicks</title>
</head>
<body>

    <form>
        <input type="button" value="click here" onclick="totalClicks();">
    </form>

Total clicks: <span id="numclicks"></span>

    <script type="text/javascript">
        function totalClicks(){
            if (window.numclicks) {
                numclicks++;
            }
            else {
                numclicks = 1;
            }

            document.getElementById("numclicks").innerHTML = numclicks;

        }
    </script>

</body>
</html

Slava gives a ore complete answer, but for your info, Javascript has the fairly insane concept of hoisting. Once you understand it it's really simple, until you do things seem really bizzarre. Here is a really short and simple article on it: elegantcode.com/2010/12/24/basic-javascript-part-5-hoisting — George Mauer
– George Mauer, Commented Dec 17, 2011 at 22:51
@ George - Thanks for the link. I checked the article, but the following is still not clear. The author says "But function scope means that all variables and parameters declared inside a function are visible everywhere within that function, even before the variable has been declared." If they are visible everywhere, why is the first output `undefined``. What does "visible everywhere" mean? — Curious2learn
– Curious2learn, Commented Dec 17, 2011 at 23:39
@Curious2learn because you coded a very subtle bug into this. Run jsfiddle.net/VjpQh with your console open and you'll see. The first time it runs it tests if window.numclicks exists. You think it doesn't, right? Because you didn't create it yet. But you did! <span id="numclicks"></span> can be (but should NOT be) accessed via window.numclicks. In other words, the first time you run, you get NaN because you are doing (the span)++ which is NaN which evaluates to false the second time and you finally get what you are trying to achieve. — George Mauer
– George Mauer, Commented Dec 19, 2011 at 3:36

John Stimac · Accepted Answer · 2011-12-17 23:02:04Z

2

The first time you define numclicks, it needs to be outside of any functions so it becomes global. Using var while still defining a variable inside a function does not make it global. Using var on a global variable inside a function will make it a local variable.
You have an element with the id of numclicks, so window.numclicks points to that element by default.

answered Dec 17, 2011 at 23:02

John Stimac

5,4918 gold badges44 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

SlavaNov · Accepted Answer · 2011-12-17 22:47:58Z

0

Try this:

<html>
<head>
    <title>Count number of clicks</title>
</head>
<body>

    <form>
        <input type="button" value="click here" onclick="totalClicks();">
    </form>

Total clicks: <span id="numclicks"></span>

    <script type="text/javascript">
        function totalClicks(){
            var numClicks = document.getElementById("numclicks").value;

            if (numclicks > 0) {
                numclicks++;
            }
            else {
                numclicks = 1;
            }

            document.getElementById("numclicks").innerHTML = numclicks;

        }
    </script>

</body>
</html>

answered Dec 17, 2011 at 22:47

SlavaNov

2,4851 gold badge19 silver badges26 bronze badges

2 Comments

Fantius Over a year ago

While this may work, it's an ugly and inefficient substitute for a global variable.

ajax333221 Over a year ago

9. Stop touching the DOM, damnit! jonraasch.com/blog/…

s4y · Accepted Answer · 2011-12-18 00:41:21Z

0

Of course it needs to be a global variable.

This is because the scope of the local variable dies as soon as you reach the end of the totalClicks() function.
I don't know what causes this but setting numclicks to 0 OUTSIDE the function should help. Set window.numclicks to 0 and always use window.numclicks so you can always see which is a global variable. (The global scope is often very practical even though it is often frowned upon in many languages)

edited Dec 18, 2011 at 0:41

s4y

51.9k12 gold badges73 silver badges98 bronze badges

answered Dec 17, 2011 at 22:51

sinni800

1,46914 silver badges30 bronze badges

Collectives™ on Stack Overflow

Using var keyword when defining a variable in Javascript

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related