By Bluemagica


2010-12-21 10:52:12 8 Comments

<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?

5 comments

@jwueller 2010-12-21 10:55:02

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.

@Martin Hennings 2010-12-21 10:56:12

+1 for window.onload and for anonymous function ^^

@Davis Peixoto 2010-12-21 10:58:01

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

@dheerosaur 2010-12-21 10:56:33

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.

@IonuČ› Staicu 2010-12-21 10:55:05

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.

@sjngm 2010-12-21 10:54:45

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.

Related Questions

Sponsored Content

43 Answered Questions

[SOLVED] How do I remove a property from a JavaScript object?

41 Answered Questions

[SOLVED] For-each over an array in JavaScript

61 Answered Questions

[SOLVED] How do I include a JavaScript file in another JavaScript file?

28 Answered Questions

[SOLVED] What does "use strict" do in JavaScript, and what is the reasoning behind it?

95 Answered Questions

[SOLVED] How to validate an email address in JavaScript

86 Answered Questions

[SOLVED] How do JavaScript closures work?

3 Answered Questions

57 Answered Questions

[SOLVED] How do I check if an element is hidden in jQuery?

67 Answered Questions

[SOLVED] What is the most efficient way to deep clone an object in JavaScript?

Sponsored Content