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

Ripalben Patel
Ripalben Patel
6,193 Points

setting a Reset button.

I am trying to set reset button but when I preview it it doesn't work. here is the code for app.js file: const myHeading = document.getElementById('myHeading'); const myButton = document.getElementById("myButton"); const reset = document.getElementById("reset");

myButton.addEventListener('click', () => { myHeading.style.color = 'purple'; }); reset.addEventListner("click", () => { myHeading.style.color = "black";
})

below is the code for 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">Change the color of Heading</button> <button id= "reset">Reset</button> <script src="app.js"></script> </body> </html>

Steven Parker
Steven Parker
203,722 Points

When posting code, use the instructions for code formatting in the Markdown Cheatsheet pop-up below the "Add an Answer" area. :arrow_heading_down:   Or watch this video on code formatting.

2 Answers

Steven Parker
Steven Parker
203,722 Points

I managed to spot a typo even in the unformatted code:

You wrote "addEventListner" (missing an "e") instead of "addEventListener".

Fix that and it will work.

Stivan Radev
Stivan Radev
1,475 Points
const myHeading = document.getElementById('myHeading');
const myButton = document.getElementById("myButton");
const reset = document.getElementById("reset");

myButton.addEventListener('click', () => {
    myHeading.style.color = 'purple';
});
reset.addEventListner("click", () => {
    myHeading.style.color = "black";
})
<!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">Change the color of Heading</button> <button id="reset">Reset</button>
    <script src="app.js"></script>
</body>

</html>

CORRECT FORMAT NOT ANSWERED

Ripalben Patel
Ripalben Patel
6,193 Points

Thank you Steven. It worked. :)