Home/ Questions/Q 6209973
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T06:04:47+00:00

I’ve had this confusion since long. There is an error called cannot read property

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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";
  }
};
    • 0