Menu
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
299
Put 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
116
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 complete, 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.
27
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
