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 Adriana Ingwerson
Adriana Ingwerson
4,115 Points

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

nirmalabasdeo
seal-mask
.a{fill-rule:evenodd;}techdegree
nirmalabasdeo
Python Development Techdegree Student 3,787 Points
nirmalabasdeo
.a{fill-rule:evenodd;}techdegree
nirmalabasdeo
Python Development Techdegree Student 3,787 Points

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>
<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>
    <button id="myButton">Make Heading Red</button>
   <script src="app.js"></script>
  </body>
</html> ```

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



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

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

Thanks.

HIDAYATULLAH ARGHANDABI
HIDAYATULLAH ARGHANDABI
21,058 Points
HIDAYATULLAH ARGHANDABI
HIDAYATULLAH ARGHANDABI
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

gkl
gkl
5,336 Points
gkl
gkl
5,336 Points

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