convert Javascript object to dom element

Question

I've had this confusion since long. There is an error called cannot read property of null on chrome inspector.

Upon searching and reading, i found that a property (eg style) can be applied to a DOM element, but if it is rendered as a javascript object it gives the above error.

So how do i go about this?

<html>
    <head>
        <style>
            #test {background:black;width:30px;height:30px;}
        </style>
        <script>
            var a = document.getElementById('test');
            a.style.background = "#f00";
        </script>
    </head>
    <body>
            <div id="test">
            </div>
</body>
</html>

When i did alert(typeof a); it gives as object. So how do I, in general, change properties of elements ??

I don't really understand what you're asking... in your example, a does contain a DOM element, and the way you are referencing the properties is correct and should work if the element is in the DOM when the script runs. — James Allardice
– James Allardice, Commented Aug 3, 2011 at 18:43

zzzzBov · Accepted Answer · 2011-08-03 18:41:53Z

5

The issue is that #test doesn't exist when the script is executed. The script is executed immediately as the page is loaded, and at the point when the browser executes the script, it hasn't gotten to <div id="text"></div>, so document.getElementById('test') returns null.

null values don't have properties, so calling: a.style.background... causes JavaScript to error out. If you'd attached this script to body.onload, the callback function provided would execute after the rest of the page was loaded:

document.body.onload = function(){
  var a = document.getElementById('test');
  if ( a ) //just a check to make sure that `a` was set so that it doesn't error again.
  {
    a.style.background = "#f00";
  }
};

answered Aug 3, 2011 at 18:41

zzzzBov

180k57 gold badges328 silver badges375 bronze badges

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

Comments

psx · Accepted Answer · 2011-08-03 18:43:30Z

3

Your javascript is running before the page has finished loading.

You need to put your javascript inside an window.onload like this:

window.onload = function()
{
  var a = document.getElementById('test');
  a.style.background = "#f00";
}

answered Aug 3, 2011 at 18:43

psx

4,0486 gold badges32 silver badges59 bronze badges

Comments

Jose Faeti · Accepted Answer · 2011-08-03 18:44:51Z

1

You need to wait for the DOM to be completely loaded before calling that script, because when you are calling the code the element isn't created yet.

http://jsfiddle.net/m5Qqs/1/

answered Aug 3, 2011 at 18:44

Jose Faeti

12.3k6 gold badges40 silver badges53 bronze badges

Collectives™ on Stack Overflow

convert Javascript object to dom element

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related