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) Responding to User Interaction Adding an Event Listener

ashique desai
ashique desai
3,662 Points
Posted by ashique desai
ashique desai
3,662 Points

In the button click handler apply the background color of "red" to the warning div.

Hi their, I am stuck at task 3 of this challenge. Can any one help please?

app.js 
```JavaScript
const warning = document.getElementById("warning");
let button = document.getElementById('makeItRed');
button.addEventListener('click',warning.style.css.backgroundColor=red;() => {
});

```index.html
<!DOCTYPE html>
<html>
    <head>
        <title>Adding an Event Listener</title>
    </head>
    <link rel="stylesheet" href="style.css" />
    <body>
        <div id="warning">
            Warning: My background should be red!
        </div>
        <button id="makeItRed">Make It Red!</button>
        <script src="app.js"></script>
    </body>
</html>

5 Answers

Steven Parker
Steven Parker
229,744 Points
Steven Parker
Steven Parker
229,744 Points

:point_right: You're close, but you have a few issues yet:

  • The handler code must go on the other side of the "arrow" ("=>") symbol, inside (or instead of) the braces.
  • The style.backgroundColor property should have no "css" in it.
  • The color name is a string and should have quotes around it.
ashique desai
ashique desai
3,662 Points
ashique desai
ashique desai
3,662 Points

Thanks a ton! Steven.

Robert Neal
Robert Neal
12,372 Points
Robert Neal
Robert Neal
12,372 Points

Here's what steven was referring to

const warning = document.getElementById("warning");
let button = document.getElementById('makeItRed');

button.addEventListener('click', function(){
 warning.style.backgroundColor = 'red';
});

you could also do it like this...

button.addEventListener('click', () => warning.style.backgroundColor = 'red');
Matthieu McClintock
Matthieu McClintock
3,251 Points
Matthieu McClintock
Matthieu McClintock
3,251 Points

I still have no idea and i've made all of the edits mentioned above and I've seen every error message under the sun.

zanydev
zanydev
5,503 Points

In the example posted above by Robert, take a look at the syntax when setting the backgroundColor to Red: There is a leftover curly bracket from switching to an arrow function.

button.addEventListener('click', () => warning.style.backgroundColor = 'red');

This would be a more correct option making use of the arrow function.

Hope that helps Matthieu. Most of the errors we all seem to make when coding are just a stray mark or a typo

cossy
cossy
17,748 Points
cossy
cossy
17,748 Points

const warning = document.getElementById("warning"); let button= document.getElementById("makeItRed"); button.addEventListener('click', function(){ warning.style.backgroundColor = 'red'; });

Robert Neal
Robert Neal
12,372 Points
Robert Neal
Robert Neal
12,372 Points

lol sorry about that good job catching it zanydev