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 ??
3 answers
solution1
5 ACCPTED 2011-08-03 18:41:53
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";
}
};
solution2
3 2011-08-03 18:43:30
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";
}
solution3
1 2011-08-03 18:44:51
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.