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 A Simple Example

Posted by Cody Tapp
Cody Tapp
9,667 Points

Heading is not turning red when clicked

I have followed this video three times, for some reason, even when I type it exactly as the instructor, when I return to the next line, my line is like halfway across the page like I missed something. Refreshing the page does not cause the heading to turn red when clicked.

Here is the index.html file

<!DOCTYPE html> <html> <head> <title>JavaScript and the DOM</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <h1 id="myHeading">JavaScript and the DOM</h1> <p>Making a web page interactive</p> <script src="app.js"></script> </body> </html>

Here is the app.js file

const myHeading = document.getElementById('myHeading');

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

});

7 Answers

Andre Johnson
Andre Johnson
4,148 Points
Andre Johnson
Andre Johnson
4,148 Points

you need to remove the ; from red like this

red; wrong red right

Steven Parker
Steven Parker
231,236 Points
Steven Parker
Steven Parker
231,236 Points

It seems to work correctly for me. Clicking on the text turns it red, reloading the page makes it black again. And it works repeatedly.

To facilitate a more accurate analysis, make a snapshot of your workspace and post the link to it here.

marialena alevizaki
marialena alevizaki
10,296 Points
marialena alevizaki
marialena alevizaki
10,296 Points

Check to see if your app.js file is connected to your index.html. Add to your javascript file an alert("Connected") to see if it's working. If it's not maybe the path for your app.js file isn't right, so you have to change <script src="app.js"></script>.

Steven Parker
Steven Parker
231,236 Points
Steven Parker
Steven Parker
231,236 Points

In your case it's a spelling issue. You have "getElementsById" (plural) instead of "getElementById".

And for future issues, always start a fresh question instead of adding one as an "answer" to another question.

Steven Parker
Steven Parker
231,236 Points
Steven Parker
Steven Parker
231,236 Points

You should always start a fresh question instead of adding one as an "answer" to another question.

And you have the same spelling issue as Richard did. But in your case, also the "app.js" file is in the wrong place. It should be in the main folder with the "index.html" file, but right now it's in the "css" sub-folder.

Steven Parker
Steven Parker
231,236 Points
Steven Parker
Steven Parker
231,236 Points

Please start a fresh question and post this there.

Dana Seidakhmetova
Dana Seidakhmetova
10,956 Points

You should change "getElementsById" to "getElementById".