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

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

Posted by Polo Moreno
Polo Moreno
11,782 Points

I have a dude in this challenge

The challenge say the next he 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.

I belive the solution is a conditional but i not How to generate the conditional.

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';
})

 colorSquare.addEventListener('click', (e) => {

 }
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

Chase Marchione
Chase Marchione
155,055 Points
Chase Marchione
Chase Marchione
155,055 Points

Hi Polo,

The solution is to cut the colorSquare declaration/initialization out of the code for the redButton click event listener, and pasting it in an area in which both of the addEventListener methods can access it.

This is a matter of scope: by doing the declaration/initialization in a place where both of the addEventListener methods can 'see' it, both can access that code. This way, we don't have to repeat ourselves (and can, therefore, adhere to the principle of DRY), by avoiding putting the declaration/initialization code in both of the methods.

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';
})

Hope this helps!

Kieran Tross
Kieran Tross
8,266 Points
Kieran Tross
Kieran Tross
8,266 Points

Yes that route works. I did mine with an additional eventlistener. See below.

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'; });

colorSquare.addEventListener('click', (e) => {

if (document.getElementById('redButton').onclick == true){ redButton(); } else { blueButton(); }

});