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

Hugo Zaanen
Hugo Zaanen
11,793 Points

The background turns red but it doesnt evaluate correct

This assignment doesnt correctly eveluate. The background has been turned to red.

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


button.addEventListener('click', () => {
  let warning = document.getElementById("warning");
  warning.style.background = "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>

3 Answers

Brandon White
seal-mask
MOD
.a{fill-rule:evenodd;}techdegree seal-36
Brandon White
Treehouse Moderator

Hi Hugo,

I just copy/pasted your code into the challenge, and it passed all three phases. So maybe try again, see if it works now...

That said, I'll point out one thing you're doing that maybe you don't want to do in code for your own projects.

A warning variable has already been created on the first line, so you don't really need to create a second one to be locally scoped to the callback function. You could remove this line let warning = document.getElementById("warning"); and the functionality of your code would work the exact same way.

SN: I thought that maybe the issue was that you were using the background property instead of the backgroundColor property, but like I said, your code pass all three phases of the challenge for me as is. If for some reason it still doesn't pass for you, try changing the background property to backgroundColor. (That's just me telling you to throw darts at the wall. Lol)

Hugo Zaanen
Hugo Zaanen
11,793 Points

yeah i fixed i, with the right implementation of selecting the element

Hi Hugo,

I copied your code and it passed all three tests for me?

Maybe try restarting the challenge and pasting in your code above to see if you can get through.

Robert Jordan
Robert Jordan
7,320 Points

I noticed the reason that warning was already assigned as a Variable under "var" "let warning" was not needed technically it was close to repeating code. I hope that makes sense?