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

Jacob Anderson
Jacob Anderson
7,888 Points
Posted by Jacob Anderson
Jacob Anderson
7,888 Points

Title not turning red.

I have checked my code over a few times and it seems that it is correct. I have also checked to see if my browser supports the arrow function and I am running a current version of google chrome. Anyone notice anything that I may have missed? Thanks! 

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

myHeading.addEventListener('click', () => {
  myHeading.style.color = 'red';                          
});
Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

Added some code formatting to make things a bit easier to read.

Leo Marco Corpuz
Leo Marco Corpuz
18,975 Points
Leo Marco Corpuz
Leo Marco Corpuz
18,975 Points

My code doesn't work either const myHeading=document.getElementById('myHeading'); myHeading.addEventListener('click',() => { myHeading.style.color='red'; })

Steven Parker
Steven Parker
231,198 Points
Steven Parker
Steven Parker
231,198 Points

You may want to start a fresh question, and be sure to show the HTML along with the script code.

8 Answers

Antonio De Rose
Antonio De Rose
20,885 Points
Antonio De Rose
Antonio De Rose
20,885 Points

Your code works perfect for me.

it would not turn into red, when the page loads, you will have to click on the title to turn into red, as the event you have put is listening and waiting on the click to happen to turn into red.

BTW, when you post code, use the markdown, it does increases the readability.

try using https://jsfiddle.net/ it helps you debug the of your own, this is how I debug the code to see it is turning red.

Jamie Burgess
Jamie Burgess
3,973 Points
Jamie Burgess
Jamie Burgess
3,973 Points

I think something is wrong with Treehouse Workspaces. JSFiddle was an excellent suggestion!!!

Israel Bautista
Israel Bautista
1,254 Points
Israel Bautista
Israel Bautista
1,254 Points

something is definitely wrong with the workspaces. I copy and paste my code on fiddle and it worked just fine

Johnny Harrison
Johnny Harrison
4,331 Points
Johnny Harrison
Johnny Harrison
4,331 Points

I'm having the same problem. I was going crazy looking for a subtle typo, but I put my code into jsfiddle and it works! Thanks for that suggestion, guys!

UPDATE: After further troubleshooting, it appears Workspaces isn't running app.js at all. At least for me.

Steven Parker
Steven Parker
231,198 Points
Steven Parker
Steven Parker
231,198 Points

The code looks good to me. Are you sure you actually have an element with the ID of "myHeading" in your HTML?

Maybe show the HTML code too. Even better, make a snapshot of your workspace and post the link to it here.

Jacob Anderson
Jacob Anderson
7,888 Points
Jacob Anderson
Jacob Anderson
7,888 Points 
<!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 scr="app.js"></script>
    <input type ="text" id ="myTextInput">
    <button id ="myButton">Change colour</button>
    <script src ="app.js"></script>
  </body> 
</html>

Let me know if you see anything I don't but it looks all good to me. Thanks

Steven Parker
Steven Parker
231,198 Points
Steven Parker
Steven Parker
231,198 Points

Using that HTML, when I click on the heading "JavaScript and the DOM", it turns red.

But the controls on the rest of the page give the impression that filling in the box and clicking the button would change color, and that functionality has not been implemented in this JavaScript.

Antonio De Rose
Antonio De Rose
20,885 Points
Antonio De Rose
Antonio De Rose
20,885 Points

the one that you have the second time too, does works well for me, are you clicking on the 'JavaScript and the DOM', for it to appear in red, if you still do not get to see it turning red, just as steven mentioned, take snapshot.

James Harper
James Harper
1,856 Points
James Harper
James Harper
1,856 Points

Same problem for me, nothing was working on the workspace but then I copied and pasted into jsfiddle and worked perfectly

Steven Parker
Steven Parker
231,198 Points
Steven Parker
Steven Parker
231,198 Points

Try starting a fresh question and include your workspace "snapshot".

Alex Busu
PLUS
Alex Busu
Courses Plus Student 11,819 Points
Alex Busu
Alex Busu
Courses Plus Student 11,819 Points

Make sure to add the <script> tag in the body at the very bottom. Basically what's happening is that the script is executing before the element has had a chance to exist. So the myHeading object becomes null and you can't add an event listener to it.

If you put the script tag at the bottom it now loads all the html then the script tag and then executes.