Menu
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 ??
653
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";
}
};
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";
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
