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 Humoyunmirzo Nosirov
Humoyunmirzo Nosirov
Courses Plus Student 5,154 Points

I am just stuck

I added const colorSquare = document.getElementById('colorDiv'); but it says it might work but you must not add a line

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

Dave Harker
PLUS
Dave Harker
Courses Plus Student 15,510 Points
Dave Harker
Dave Harker
Courses Plus Student 15,510 Points

Hi Humoyunmirzo Nosirov,

This challenge has to do with variable scope. The code line: 

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

is referenced by BOTH button event listener functions so you can just move it out of the redButton function and make it available to both by including it with the other const declarations.

You won't be 'adding' a line then, just moving one to change the variable scope :smile:

Best of luck and happy coding :smile:
Dave :dizzy:

Humoyunmirzo Nosirov
PLUS
Humoyunmirzo Nosirov
Courses Plus Student 5,154 Points
Humoyunmirzo Nosirov
Humoyunmirzo Nosirov
Courses Plus Student 5,154 Points

thanks , I did