You are almost certainly running your code before the DOM is constructed. Try running your code in a window.onload
handler function (but see note below):
window.onload = function() { // all of your code goes in here // it runs after the DOM is built }
Another popular cross-browser solution is to put your <script>
block just before the closing </body>
tag. This could be the best solution for you, depending on your needs:
<html> <body> <!-- all of your HTML goes here... --> <script> // code in this final script element can use all of the DOM </script> </body> </html>
- Note that
window.onload
will wait until all images and subframes have loaded, which might be a long time after the DOM is built. You could also usedocument.addEventListener("DOMContentLoaded", function(){...})
to avoid this problem, but this is not supported cross-browser. The bottom-of-body trick is both cross-browser and runs as soon as the DOM is complete.