JavaScript JavaScript and the DOM Getting a Handle on the DOM A Simple Example

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';                          
});

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

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
171,296 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,840 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.

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

Israel Bautista
Israel Bautista
1,249 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

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
171,296 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
<!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
171,296 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,840 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

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
171,296 Points

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

Alex Busu
PRO
Alex Busu
Pro 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.