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

Hugo Zaanen
Hugo Zaanen
11,897 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
.a{fill-rule:evenodd;}techdegree seal-36
Brandon White
Full Stack JavaScript Techdegree Graduate 35,771 Points

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,897 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.

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?