Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript DOM Scripting By Example Adding and Removing Names Practice with Function Scope

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

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) => {
   // const colorSquare = document.getElementById('colorDiv');
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;
}

2 Answers

Joe Peel
Joe Peel
14,383 Points

Got stuck as well on this for a while.

You need to move the - const colorSquare = document.getElementById('colorDiv'); up to the top next to the other variables. Otherwise the blue button handler can't access it.

Sean Flanagan
Sean Flanagan
33,232 Points

Hi Joe Peel.

Thank you for this; I moved the constant ColorSquare up to the line below the other two constants.

Sean

Daron Anderson
Daron Anderson
2,566 Points

LOL I was like he literally just showed us in the video.

Tom Nguyen
Tom Nguyen
33,480 Points

This is what it would look like:

app.js
const redButton = document.getElementById('redButton');
const blueButton = document.getElementById('blueButton');
const colorSquare = document.getElementById('colorDiv');

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

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