thediv with the ID colorDiv should change red when the red button is clicked, and blue when the blue button is clicked.

Question

I cut the second part of the code in redButton but didn't passed.

app.js

const redButton = document.getElementById('redButton');
const blueButton = document.getElementById('blueButton');

redButton.addEventListener('click', (e) => {
  colorSquare.style.backgroundColor = 'red';
});

blueButton.addEventListener('click', (e) => {
  colorSquare.style.backgroundColor = 'blue';
})

style.css

div {
  height: 50px;
  float: left;
  padding-top: 40px;
  padding-left: 20px;

}

#colorDiv {
  padding: 0;
  width: 100px;
  height: 100px;
  background-color: gray;
}

button {
  height: 30px;
  border-radius: 10px;
}
#redButton {
  background-color: #ff5959;
  border-color: red;
}

#blueButton {
  background-color: lightblue;
  border-color: #7C9EFC;
}

Answer 1 · 2017-08-11T21:36:50Z

August 11, 2017 9:36pm

Your code didn't include the HTML or a reference in the javascript to colorSquare. I added those in and it worked just fine.

https://fiddle.jshell.net/fk4d5gk7/

Answer 2 · 2017-08-12T07:17:33Z

August 12, 2017 7:17am

Yep, like Mark said, you should just need to declare the variable for colorSquare.

const colorSquare = document.getElementById('colorDiv');

Answer 3 · 2017-08-13T18:42:14Z

August 13, 2017 6:42pm

Thank you guys, now it worked.

Welcome to the Treehouse Community

Looking to learn something new?

shirshah sahel

shirshah sahel

thediv with the ID colorDiv should change red when the red button is clicked, and blue when the blue button is clicked.

3 Answers

Mark Rinkel

Mark Rinkel

Trent Stenoien

Trent Stenoien

shirshah sahel

shirshah sahel