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 JavaScript and the DOM (Retiring) Responding to User Interaction Event Delegation

Dimitris Karatsoulas
Dimitris Karatsoulas
5,788 Points

How to turn the yellow background input back to white.

I noticed that all inputs turned yellow click after click. I thought that It'd be a cool and more proffesional feature to make it so that after a click a yellow input would turn back to white. I gave it a try but with no success. You can see my code below. What is really strange and suprising is that even if I use a && condition it seems it's not working according to the JavaScript standards. Can you possibly tell me what's wrong? *Please note I have used the lightblue color for comparison reasons. When I was using RGB (255, 255, 255) for white color I could see no changes in my preview.

app.js
let section = document.getElementsByTagName('section')[0];


section.addEventListener('click', (e) => {
  if (e.target.tagName === "INPUT"){
  e.target.style.backgroundColor = 'rgb(255, 255, 0)';
  }
});

section.addEventListener('click', (e) => {
if (e.target.tagName === "INPUT" &&  e.target.style.backgroundColor === 'rgb(255, 255, 0)'){
    e.target.style.backgroundColor = 'rgb(0, 255, 255)';
  }
});
index.html
<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript and the DOM</title>
    </head>
    <link rel="stylesheet" href="style.css" />
    <body>
        <section>
            <h1>Making a Webpage Interactive</h1>
            <p>JavaScript is an exciting language that you can use to power web servers, create desktop programs, and even control robots. But JavaScript got its start in the browser way back in 1995.</p>
            <hr>
            <p>Things to Learn</p>
            <ul>
                <li>Item One: <input type="text"></li>
                <li>Item Two: <input type="text"></li>
                <li>Item Three: <input type="text"></li>
                <li>Item Four: <input type="text"></li>
            </ul>
            <button>Save</button>
        </section>
        <script src="app.js"></script>
    </body>
</html>

10 Answers

You could loop through the input elements and clear the background color. In doing so you would no longer need to check the background color with an if condition.

let section = document.getElementsByTagName('section')[0];

section.addEventListener('click', (e) => {
  if (e.target.tagName === "INPUT"){

    clearInputs()    
    e.target.style.backgroundColor = 'rgb(255, 255, 0)';

  }
});

function clearInputs() {
   let inputs = document.getElementsByTagName('input');

   for (let item of inputs) {
      item.style.backgroundColor = '' ;
   } 
}  

Your code sets the color to yellow, then checks if its yellow and if so sets it to blue. So the result is always blue. Try something like this:

let section = document.getElementsByTagName('section')[0];

section.addEventListener('click', (e) => {
  if (e.target.tagName === "INPUT"){
    if (e.target.style.backgroundColor == '') {
       e.target.style.backgroundColor = 'rgb(255, 255, 0)';
    } else {
       e.target.style.backgroundColor = '';
    } 
  }
});
Dimitris Karatsoulas
Dimitris Karatsoulas
5,788 Points

Thank you, I should had figure this out. What about changing the color when we click on another input though? I mean when we click on the next input the previous one turns back to white so that at any given time we have at most just one colored input.

e.target is just the individual element clicked so it should be the only one affected

Dimitris Karatsoulas
Dimitris Karatsoulas
5,788 Points

Thanks, so we should another method to achieve that effect?

Dimitris Karatsoulas
Dimitris Karatsoulas
5,788 Points

That's a completely new loop for me! The for...of I mean. Thank you so much for showing this to me!

I originally tried for .. in and had errors. Then I read this stack overflow which says to never use for..in to iterate an HTMLCollection. So new to me too.

Dimitris Karatsoulas
Dimitris Karatsoulas
5,788 Points

Knowing how to search for the right answers through Stack Overflow is a must have skill for any developer!

Dimitris Karatsoulas
Dimitris Karatsoulas
5,788 Points

May I also ask why even though for both HTML collections (section and input) we use the getElementsByTagName for section you use [index] but not for input?

Dimitris Karatsoulas
Dimitris Karatsoulas
5,788 Points

I think I figured this out. For the section collection we need to work on the 1st element of the HTML collection even if it's the only one. For the input HTML collection though we need to run through all of the elements of the collection using the loop.

Adding the index of 0 specifies the first element (only) in the collection. For inputs we want to retrieve all elements so no index.

Dimitris Karatsoulas
Dimitris Karatsoulas
5,788 Points

Thanks again, you're most helpful. I did figure this out by myself just after I posted the question.