Element Has No Properties

Error: element has no properties

This error is most frequently caused by trying to access an element on the page that does not (yet) exist. Look at the following example:

<script type="text/javascript">
$('something').hide();
</script>
 
<div id="something">hide me</div>

While it seems that this should work, it can fail. Pages render top-to-bottom, so if the script executes before the browser has rendered the div (e.g., before the DOM has loaded) you will get an error. The frustrating part is this happens one some pages with some browsers, depending on how fast the page renders and how quickly the script executes.

This problem can be prevented by deferring the execution of your script until after the page has rendered. Note that this is different than when the page has loaded. Using the onload event in the body tag will not solve this problem.

You can defer your script execution in two ways:

1) Use Prototype's custom dom:loaded event:

document.observe("dom:loaded", function() {
    $('something').hide();
});

2) Wrap your script in a function and insert a script tag at the bottom of the page that calls this function.

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License