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

My heading won't change color when entered in text input box

I may not be able to catch whatever small detail I am missing. But everything works except my heading changing color when I type a color in the box and push my button.

3 Answers

I am having the same problem Adriana had, I am unable to get my heading to change color when click or by using the button. I have looked at the recommendation given by @Hidayatullah but I am not seeing any mispelled method. Here is the code, please let me know what I am missing.

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

``` JavaScript
const myHeading =document.getElementById('myHeading');
const myButton = document.getElementById('myButton');

myButton.addEventListener('click', () =>{

 myHeading.style.color ='red'; } )


21,058 Points

you might have misspelled the method to select the button. pay attention to the selectors in JavaScript you use I think the problem is document.getElementById('id tag come here');

Read the documentation for further https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById

I think you are missing a semicolon after the last line. It should be myHeading.style.color ='red'; });