JavaScript JavaScript and the DOM Getting a Handle on the DOM Select a Page Element By Its ID

Why isnt my heading turning red ?

app.js

const myHeading = document.getElementById('myHeading');

myHeading.addEventListener('click', () => { myHeading.style.color = 'red'; });

index.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> <button id="myButton">Make heading red</button> <script src="app.js"></script> </body> </html>

1 Answer

Steven Parker
Steven Parker
203,722 Points

It does turn red if you click on the heading itself, because that's what the click event handler is attached to.

Did you intend to attach it to the button instead? That change is made later in the video.

It doesn't on my workspace, copied it in my text editor and it worked.

Steven Parker
Steven Parker
203,722 Points

To facilitate a complete analysis, make a snapshot of your workspace and post the link to it here.