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 trialashique desai
3,662 PointsIn the button click handler apply the background color of "red" to the warning div.
Hi their, I am stuck at task 3 of this challenge. Can any one help please?
```JavaScript
const warning = document.getElementById("warning");
let button = document.getElementById('makeItRed');
button.addEventListener('click',warning.style.css.backgroundColor=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>
5 Answers
Steven Parker
231,269 PointsYou're close, but you have a few issues yet:
- The handler code must go on the other side of the "arrow" ("
=>
") symbol, inside (or instead of) the braces. - The
style.backgroundColor
property should have no "css" in it. - The color name is a string and should have quotes around it.
Robert Neal
12,372 PointsHere's what steven was referring to
const warning = document.getElementById("warning");
let button = document.getElementById('makeItRed');
button.addEventListener('click', function(){
warning.style.backgroundColor = 'red';
});
you could also do it like this...
button.addEventListener('click', () => warning.style.backgroundColor = 'red');
Matthieu McClintock
3,251 PointsI still have no idea and i've made all of the edits mentioned above and I've seen every error message under the sun.
zanydev
5,503 PointsIn the example posted above by Robert, take a look at the syntax when setting the backgroundColor to Red: There is a leftover curly bracket from switching to an arrow function.
button.addEventListener('click', () => warning.style.backgroundColor = 'red');
This would be a more correct option making use of the arrow function.
Hope that helps Matthieu. Most of the errors we all seem to make when coding are just a stray mark or a typo
cossy
17,748 Pointsconst warning = document.getElementById("warning"); let button= document.getElementById("makeItRed"); button.addEventListener('click', function(){ warning.style.backgroundColor = 'red'; });
Robert Neal
12,372 Pointslol sorry about that good job catching it zanydev
ashique desai
3,662 Pointsashique desai
3,662 PointsThanks a ton! Steven.