Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript JavaScript and the DOM (Retiring) Getting a Handle on the DOM Select a Page Element By Its ID

Pontus Bolmér
Pontus Bolmér
12,471 Points
Posted by Pontus Bolmér
Pontus Bolmér
12,471 Points

Wierd with problem browsers

This is wierd, when im doing this code

const myHeading = document.getElementById("myHeading"); const myButton = document.getElementById("myButton");

myButton.addEventListener('click', () => { myHeading.style.color = 'red';

});

In the work space at treehouse it works, but when i try to do it in my own workspace with visiual studios programing it does not work. It gives me a error

"app.js:7 Uncaught TypeError: Cannot read property 'addEventListener' of null at app.js:7"

Why is this?:S

4 Answers

Nick Trabue
PLUS
Nick Trabue
Courses Plus Student 12,666 Points
Nick Trabue
Nick Trabue
Courses Plus Student 12,666 Points

Ah, the problem is you're calling your script before your dom content exists. As a result, your h1 and button don't exist yet. So when the Javascript loads your two variables are coming back as "null" if you want to test, add console.log(myHeading) before your click event.

You have a couple of options and both, as far as I know, go along with best practices. You can add a footer to your html and move the script call down there

<!Doctype html>
<html>

<head>
    <title>Basic javascript</title>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

<body>
    <h1 id="heading">My Heading</h1>
    <p>Making a web page interactive</p>
    <button id="button">Make heading red</button>
</body>
<footer>
    <script src="app.js"></script>
</footer>

</html>

OR add async to your script call so that it loads after your dom content like this

<!Doctype html>
<html>

<head>
    <title>Basic javascript</title>
    <script src="app.js" async></script>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

<body>
    <h1 id="heading">My Heading</h1>
    <p>Making a web page interactive</p>
    <button id="button">Make heading red</button>
</body>

</html>
Nick Trabue
PLUS
Nick Trabue
Courses Plus Student 12,666 Points
Nick Trabue
Nick Trabue
Courses Plus Student 12,666 Points

Can you share your html and javascript from visual studios?

Pontus Bolmér
Pontus Bolmér
12,471 Points
Pontus Bolmér
Pontus Bolmér
12,471 Points

<!Doctype html> <html>

    <head>
        <title>Basic javascript</title>
        <script src="app.js"></script>
        <link rel="stylesheet" type="text/css" href="mystyle.css">
    </head>

    <body> 
        <h1 id="myHeading">JavaScript and the DOM</h1>
        <p>Making a web page interactive</p>    
        <button id="myButton">Make heading red</button>        
    </body>
</html>

Thats my html and here is my javascript

const myHeading = document.getElementById("myHeading"); const myButton = document.getElementById("myButton");

myButton.addEventListener('click', () => { myHeading.style.color = 'red';

});

Pontus Bolmér
Pontus Bolmér
12,471 Points
Pontus Bolmér
Pontus Bolmér
12,471 Points

It works! Thanks allot! Your a real pro!