Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Javascript can't find element by id? [duplicate]

<html>
<head>
    <title>Test javascript</title>

    <script type="text/javascript">
        var e = document.getElementById("db_info");
        e.innerHTML='Found you';
    </script>
</head>
<body>
    <div id="content">
        <div id="tables">

        </div>        
        <div id="db_info">
        </div>
    </div>
</body>
</html>

If I use alert(e); it turns up null.... and obviously I don't get any "found you" on screen. What am I doing wrong?

like image 767
Bluemagica Avatar asked Dec 21 '10 10:12

Bluemagica


5 Answers

The problem is that you are trying to access the element before it exists. You need to wait for the page to be fully loaded. A possible approach is to use the onload handler:

window.onload = function () {
    var e = document.getElementById("db_info");
    e.innerHTML='Found you';
};

Most common JavaScript libraries provide a DOM-ready event, though. This is better, since window.onload waits for all images, too. You do not need that in most cases.

Another approach is to place the script tag right before your closing </body>-tag, since everything in front of it is loaded at the time of execution, then.

like image 50
jwueller Avatar answered Nov 05 '22 22:11

jwueller


How will the browser know when to run the code inside script tag? So, to make the code run after the window is loaded completely,

window.onload = doStuff;

function doStuff() {
    var e = document.getElementById("db_info");
    e.innerHTML='Found you';
}

The other alternative is to keep your <script...</script> just before the closing </body> tag.

like image 28
dheerosaur Avatar answered Nov 05 '22 21:11

dheerosaur


Script is called before element exists.

You should try one of the following:

  1. wrap code into a function and use a body onload event to call it.
  2. put script at the end of document
  3. use defer attribute into script tag declaration
like image 2
Davis Peixoto Avatar answered Nov 05 '22 22:11

Davis Peixoto


The script is performed before the DOM of the body is built. Put it all into a function and call it from the onload of the body-element.

like image 1
sjngm Avatar answered Nov 05 '22 22:11

sjngm


Run the code either in onload event, either just before you close body tag. You try to find an element wich is not there at the moment you do it.

like image 1
Ionuț Staicu Avatar answered Nov 05 '22 23:11

Ionuț Staicu