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
Haardik Gupta
Full Stack JavaScript Techdegree Student 5,459 PointsFunction 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
var warning = document.getElementById("warning");
var button = document.getElementById("makeItRed");
button.addEventListener('click', () => {
});
<!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
Isabelle Caspersson
6,679 PointsThis 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';
});
Jamie Reardon
Treehouse Project ReviewerIn 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.
Haardik Gupta
Full Stack JavaScript Techdegree Student 5,459 Pointshello 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
Treehouse Project ReviewerYou 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
Treehouse Project ReviewerIt's possible that the code challenge specifically wants the older function keyword in replace of the newer arrow function syntax. Try that.
Haardik Gupta
Full Stack JavaScript Techdegree Student 5,459 Pointsi 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
Treehouse Project ReviewerWhy are you naming the function? You don't need to name the function.
button.addEventListener('click', function() {
});
Gareth Partridge
13,421 PointsGareth Partridge
13,421 PointsHello Isabelle, it should be the following.
button.addEventListener('click', () => { warning.style.backgroundColor = 'red'; });