JavaScript Global Variable cannot be accessed inside function

Question

The code is as follows :

<html>
<head>
<title>JS Test</title>
<script>
var con=document.getElementById("con");
    function btn()
    {
        con.innerHTML="Hello";
    }
    </script>
</head>
<body>
    <input type="button" value="Click me" onclick="btn()" />
    <div id="con"></div>
</body>
</html>

I'm not getting the required result. Any one please explain why ? But I'm getting the result when con is initialized inside the function ie.

function btn()
{
    con=document.getElementById("con");
    con.innerHTML="Hello";
}

How to access the global variable declare outside the function? Also tried window.con , but not works.. please explain the reason...

Check the value of con, it will be null, which means it has been assigned a value and is available. — RobG
– RobG, Commented Mar 3, 2014 at 3:09

imjared · Accepted Answer · 2014-03-03 03:01:24Z

2

You're running the script in the head so the DOM element doesn't exist yet. Try moving your script to the footer and you should be golden.

answered Mar 3, 2014 at 3:01

imjared

20.7k4 gold badges56 silver badges76 bronze badges

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

Comments

Mik378 · Accepted Answer · 2014-03-03 03:01:54Z

0

Just put the script at the bottom.

Indeed, when document.getElementById("con"); is not declared in a function, the targeted element is about to be retrieved directly but doesn't exist yet.

answered Mar 3, 2014 at 3:01

Mik378

22.2k15 gold badges94 silver badges191 bronze badges

Collectives™ on Stack Overflow

JavaScript Global Variable cannot be accessed inside function

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related