JavaScript getElementById returns null error?

Question

So I just started with HTML and JavaScript and I thought it would be fun to experiment with iFrames.

But I ran into a problem I can't seem to solve: Uncaught TypeError: Cannot read property 'value' of null

This is the code:

<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <script>
            var link = document.getElementById("LinkJ");
            var button = document.getElementById("ButtonJ");
            var surf = document.getElementById("SurfJ");

            function PressButton(){
                surf.src = link.value;
            }
        </script>
    </head>

    <body>
        URL:
        <input name="LinkN" id="LinkJ" type="url" value="http://www.bing.com/"></input>
        <button name="ButtonN" id="ButtonJ" onclick="PressButton()">Surf</button>

        <br><br>

        <iframe name="SurfN" id="SurfJ" style="position: absolute; height: 80%; width: 90%" src="http://www.bing.com/">
        </iframe>
    </body>
</html>

Your script is executing before the DOM is rendered. Move your script at the end of your html — Nikhil Aggarwal, Jul 11 '15 at 16:38
Sorry, I didn't see that one. I am quite new to StackOverflow. Sorry and thanks. — Bram, Jul 11 '15 at 16:43

score 1 · Accepted Answer · answered Jul 11 '15 at 16:40

Your script is executing before the DOM is rendered. Move your script at the end of your html or after the DOM elements you are using.

Or you can also update your script to following

<script>
    function PressButton(){
        document.getElementById("SurfJ").src = document.getElementById("LinkJ").value;
    }
</script>

JavaScript getElementById returns null error?

1 Answers1