Local and global variables in JavaScript

Question

Today, I started to code a page that prompts the user to choose their PC specification, and the code is as follows.

<html>
    <title>Computer Specification Chooser</title>

    <head>
        <script type="text/javascript">
            var compSpec = document.compChooser;

            function processorUnavailable_onclick()
            {
                alert("Sorry, that processor speed is currently unavailable.");
                compSpec.processor[2].checked = true;
            }
        </script>
    </head>

    <body>
        <form name="compChooser">
            <p>Tick all components you want included in your computer</p>

            <p>
            DVD-ROM

            <input type="checkbox" name="chkDVD" value="DVD-ROM" />
            <br />

            CD-ROM
            <input type="checkbox" name="chkCD" value="CD-ROM" />
            <br />

            Zip Drive
            <input type="checkbox" name="chkZIP" value="ZIP DRIVE" />
            </p>

            <p>
            Select the processor speed you require
            <br />

            <input type="radio" name="processor" value="3.8" />
            3.8 GHz

            <input type="radio" name="processor" value="4.8" onclick="processorUnavailable_onclick()" />
            4.8 GHz


            <input type="radio" name="processor" value="6" />
            6 GHz
            </p>

            <input type="button" name="btnCheck" value="Check Form" />
        </form>
    </body>

</html>

The problem I'm facing is in the function that I've tied to the event handler. When I try to choose the radio button of the processor value 4.8 GHz, yes it alerts me with the message inside the function, but after that, it doesn’t not execute the next statement inside the function, that is, to check the next processor value, 6 GHz.

I've tried to change it and test on it, and found out when I set the var compSpec = document.compChooser as a local variable inside the function instead of a global variable, the next statement could be executed.

But I thought for a global variable, it is accessible everywhere on the page and also inside a function. But why now can't I accesses it inside my function?

Besides, I stumbled upon a weird article while googling. It says that when a global variable is created, it is added to the window object. Why does this happen? And what are the benefits and uses of it?

Shouldn't the `title` tag be inside the `head` tag? – Peter Mortensen Oct 15 '20 at 19:53 — Peter Mortensen, Oct 15 '20 at 19:53

score 2 · Accepted Answer · edited Oct 15 '20 at 19:56

In JavaScript, a global variable is a property of the global object. When running inside a browser, the global object is the window object. So if you don't use the var keyword, you are not actually declaring a variable, instead you are setting a property of the window object. It's useful because the window object is accessible from everywhere, and so is your global variable.

If you declare compSpec as a variable (var) inside your processorUnavailable_onclick function, its scope will be limited to that function (and closures created inside it). If you set compSpec as a global variable (i.e., a property of window), then it will be available from everywhere:

function body_onload()
{
    window.compSpec = document.compChooser;
}

function processorUnavailable_onclick()
{
    alert("Sorry, that processor speed is currently unavailable.");
    window.compSpec.processor[2].checked = true;
}

...<body onload="body_onload()">...

score 1 · Answer 2 · edited Oct 15 '20 at 19:56

1

Your problem is this line: compSpec = document.compChooser

When this code runs, the form is not yet part of the DOM, so compSpec is undefined.

Place your code at the end of the document or run it in an onload handler and it will work.

edited Oct 15 '20 at 19:56

Peter Mortensen

30,738
21
105
131

answered Jun 15 '10 at 08:06

meouw

41,754
10
52
69

Finally I know the problem is on parsing down,but another problem is??Why when I call a function before it is created,it is still possible to be executed?? – caramel1995 Jun 15 '10 at 09:16
1

That is a good question, there are some good answers here: http://stackoverflow.com/questions/261599/why-can-i-use-a-function-before-its-defined-in-javascript – meouw Jun 15 '10 at 11:45

Local and global variables in JavaScript

2 Answers2