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

Posted by Rohini Loya
Rohini Loya
7,495 Points

Experimenting to reset the color not working.

I am trying to reset the color by adding a button. However whenever I am clicking on the button nothing color of the headline is not being reset. I am trying to reset it to black color. Below is my HTML and Javascript code -

HTML - 

<!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>
    <input type="text" id="myTextInput">
    <button id="myButton">Change Headline Color</button>
    <button id="resetButton">Reset Headline Color</button>
    <script type="text/javascript" src="app.js"></script>
  </body>
</html>

Javascript -

const myHeading = document.getElementById("myHeading");
const myButton = document.getElementById("myButton");
const myTextInput = document.getElementById("myTextInput");
const myResetButton = document.getElementById("resetButton");

myResetButton.addEventListener('click', () => {
    myResetButton.style.color = 'black';
})

myButton.addEventListener('click', () => {
    myHeading.style.color = myTextInput.value;
})

Moderator edited: Markdown added to the question so that the code renders properly on the forums.

Jennifer Nordell
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Hi there! I took the liberty of adding some markdown to your question so that it renders properly here on the forums. You can find a link to the Markdown Cheatsheet at the bottom :arrow_down: of the "Add an Answer" section on this page. This helpful link contains information about how to make your posts/questions/comments more readable for others! :sparkles:

1 Answer

Steven Parker
Steven Parker
231,271 Points
Steven Parker
Steven Parker
231,271 Points

The reset button changes the color of the button itself instead of the header.

Since it's already black, there's no visible change. Try putting 'red' instead of 'black' and it will become obvious.

So instead of writing :point_right: myResetButton.style.color = 'black';
you probably meant: :point_right: myHeading.style.color = 'black';