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

Function as parameter

i don't understand what to do i am being asked to do the following

Finally, in the button click handler, apply a background color of "red" to the warning div

app.js
var warning = document.getElementById("warning");
var button = document.getElementById("makeItRed");
button.addEventListener('click', () => {
});
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>

3 Answers

This turns the backgroundcolor red when I click on "Check work" but still I get the error message "The background doesn't turn red when the button is clicked." (?)

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

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

Exactly the same thing hapens with arrow function:

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

button.addEventListener('click', () => {
button.style.backgroundColor='red';
});
Gareth Partridge
Gareth Partridge
13,421 Points

Hello Isabelle, it should be the following.

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

Jamie Reardon
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Jamie Reardon
Treehouse Project Reviewer

In fact, upon looking again after I copied your code, you have an incorrect syntax punctuation spelling on a word. Listener, as you have spelt it with listner. This should be your fix.

hello thanks for the help after fixing it it asked me to do the following but i don't know how to do it

Finally, in the button click handler, apply a background color of "red" to the warning div

Jamie Reardon
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Jamie Reardon
Treehouse Project Reviewer

You need to use your button variable and use the property of style followed by the property of backgroundColor and assign the string value red.

Jamie Reardon
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Jamie Reardon
Treehouse Project Reviewer

It's possible that the code challenge specifically wants the older function keyword in replace of the newer arrow function syntax. Try that.

i tried var warning = document.getElementById("warning"); var button = document.getElementById("makeItRed"); button.addEventListner('click',function say(){ }); and it gave me Bummer: There was an error with your code: TypeError: 'undefined' is not a function (evaluating 'button.addEventListner('click', function say() {})')

Jamie Reardon
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Jamie Reardon
Treehouse Project Reviewer

Why are you naming the function? You don't need to name the function.

button.addEventListener('click', function() {
});