Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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,408 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() {
});