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'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 Improve this question edited Aug 3, 2011 at 18:44 Aaditi Sharma asked Aug 3, 2011 at 18:39 Aaditi SharmaAaditi Sharma 7663 gold badges9 silver badges20 bronze badges 1-
I don't really understand what you're asking... in your example,
adoes 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 Commented Aug 3, 2011 at 18:43
3 Answers
Reset to default 5The 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";
}
};
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";
}
You need to wait for the DOM to be pletely loaded before calling that script, because when you are calling the code the element isn't created yet.
http://jsfiddle/m5Qqs/1/