Example

Question

The div with the ID colorDiv should change red when the red button is clicked, and blue when the blue button is clicked. Currently, though, only the red button is working. Can you figure out how to alter the javascript code without adding any lines to the blue button's event handler?

Make sure a reference to colorDiv is held in a constant named colorSquare.

app.js

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

redButton.addEventListener('click', (e) => {
  const colorSquare = document.getElementById('colorDiv');
  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 · 2018-02-02T14:47:26Z

February 2, 2018 2:47pm

Hi Prerna

Scoping in JavaScript can be tricky. Try moving this line

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

Out of the event listener and put it at the top. This places it in the global scope so all functions can access it

Happy coding

Paul

Answer 2 · 2020-10-15T00:25:41Z

October 15, 2020 12:25am

Ah yes this was defintely tricky.

Welcome to the Treehouse Community

Looking to learn something new?

Prerna Jena

Prerna Jena

Example

2 Answers

paulscanlon

paulscanlon

Prerna Jena

Prerna Jena

Ja'Quan Thompson

Ja'Quan Thompson