When you're working with , you're likely to have run into a pretty common problem: if your Javascript appears before your HTML, then trying to do things like attach events to your HTML is not possible. For example, consider this code: Javascript <!DOCTYPE HTML>
<html>
    <head>
        <script type="text/javascript">
            document.querySelector('#button').addEventListener('click', () => {
                console.log('You clicked me!')
            });
        </script>
    </head>
    <body>
        <button id="button">Click Me</button>
    </body>
</html> Even though there is a button with the ID , this code actually throws an error. The reason why is that the Javascript is loading the DOM. Therefore trying to query select for returns null: #button before #button Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
    at file.html:5:46 This is a pretty common problem related to DOM readiness - your HTML DOM has not loaded - so it is not ready to have Javascript applied to it. Waiting for the DOM to be ready in Javascript If you want to wait for the HTML to load, before your Javascript runs - then try using . We can wrap our entire Javascript in this event listener like so: DOMContentLoaded window.addEventListener('DOMContentLoaded', () => {
    document.querySelector('#button').addEventListener('click', () => {
        console.log('You clicked me!')
    });
}); Now, no error will be produced in your code, since the code within the event listener will only fire once the HTML is fired. That means you can continue to have your Javascript before your HTML, and encounter no issues. Of course, you can also solve this problem by putting your Javascript your HTML - but this is not always possible. DOMContentLoaded after I hope you've enjoyed this quick guide to DOM Readiness and in Javascript. DOMContentLoaded Also published here.

2022 - HackerNoon Contributor of the Year - Coding

2022 - HackerNoon Contributor of the Year - Coding Skills

2022 - HackerNoon Contributor of the Year - Java

2022 - HackerNoon Contributor of the Year - Javascript

2022 - HackerNoon Contributor of the Year - Website Development

2022 - Tip Your Hat Tutorials Best Tutorials

Coding Guru of 2022

Nominated for 2022 - HackerNoon Contributor of the Year - Javascript

Nominated for 2022 - HackerNoon Contributor of the Year - Coding

Nominated for 2022 - HackerNoon Contributor of the Year - Coding Skills

Nominated for 2022 - Tip Your Hat Tutorials Best Tutorials

Nominated for 2022 - HackerNoon Contributor of the Year - Java

Nominated for 2022 - HackerNoon Contributor of the Year - Website Development

Nominated for Coding Guru of 2022

Nominated for 2022 - HackerNoon Contributor of the Year - Typescript

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

DOM Readiness in Javascript

DOM Readiness in Javascript

Too Long; Didn't Read

Johnny Simpson

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

DOM Readiness in Javascript

Too Long; Didn't Read

Johnny Simpson

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES