see below is my javascript,
<script type="text/javascript">
document.getElementById('auth').onclick=change;
function change(){
this.className="account_holder";
}
</script>
html is
<td id="auth" class="authorised_reportericon" >
<a href="{% url incident.views.authorised_reporter %}">
<p align="center" style="color:black;font-size:16px;">Authorised Reporters</p></a>
</td>
I assigned td's id for onclick,but it is trowing error as Uncaught TypeError: Cannot set property 'onclick' of null
see below is my javascript,
<script type="text/javascript">
document.getElementById('auth').onclick=change;
function change(){
this.className="account_holder";
}
</script>
html is
<td id="auth" class="authorised_reportericon" >
<a href="{% url incident.views.authorised_reporter %}">
<p align="center" style="color:black;font-size:16px;">Authorised Reporters</p></a>
</td>
I assigned td's id for onclick,but it is trowing error as Uncaught TypeError: Cannot set property 'onclick' of null
Share Improve this question asked Apr 25, 2013 at 19:13 user2086641user2086641 4,37115 gold badges59 silver badges96 bronze badges 1-
1
This is happening because the element with ID 'auth' does not exist. Why? Because the DOM hasn't fully loaded to know about the element. Use
window.onload = function() {}and put your logic there – ddavison Commented Apr 25, 2013 at 19:15
2 Answers
Reset to default 10Put document.getElementById('auth').onclick=change; inside of window.onload, like:
window.onload = function () {
document.getElementById('auth').onclick=change;
};
According to the error you're getting, I'm guessing your Javascript is executed before your relevant HTML is rendered, meaning the element with the id "auth" isn't found. Putting it in an event where the whole DOM is ready should fix the problem.
Demo: Here
Most likely you've placed the script in the head of the document, which means it's running before the rest of the page has been rendered.
Instead, move it inside the body, to the very bottom, just before the closing </body> tag.
<!doctype html>
<html>
<head>
<title>my page</title>
</head>
<body>
<!-- your page content -->
<!-- your script -->
<script type="text/javascript">
document.getElementById('auth').onclick=change;
function change(){
this.className="account_holder";
}
</script>
</body>
</html>
Now the elements will be available before the script runs. This is because the page renders in order from top to bottom, and scripts block the rendering when loading.
So when the script is in the head, it prevents the rest of the page below it from rendering until the script is plete, which means the "auth" doesn't yet exist.
Using this positioning technique of the script toward the end allows it to run potentially much sooner than waiting for a window.onload event.