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 trialJacob Anderson
7,888 PointsTitle 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';
});
Leo Marco Corpuz
18,975 PointsMy code doesn't work either const myHeading=document.getElementById('myHeading'); myHeading.addEventListener('click',() => { myHeading.style.color='red'; })
Steven Parker
231,269 PointsYou may want to start a fresh question, and be sure to show the HTML along with the script code.
8 Answers
Antonio De Rose
20,885 PointsYour 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
3,973 PointsI think something is wrong with Treehouse Workspaces. JSFiddle was an excellent suggestion!!!
Israel Bautista
1,254 Pointssomething is definitely wrong with the workspaces. I copy and paste my code on fiddle and it worked just fine
Johnny Harrison
4,331 PointsI'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
231,269 PointsThe 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
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
231,269 PointsUsing 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
20,885 Pointsthe 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
1,856 PointsSame problem for me, nothing was working on the workspace but then I copied and pasted into jsfiddle and worked perfectly
Steven Parker
231,269 PointsTry starting a fresh question and include your workspace "snapshot".
Alex Busu
Courses Plus Student 11,819 PointsMake 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.
Iain Simmons
Treehouse Moderator 32,305 PointsIain Simmons
Treehouse Moderator 32,305 PointsAdded some code formatting to make things a bit easier to read.