JavaScript JavaScript and the DOM 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>
<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
20,998 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'; });