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

This event listener works in preview, but still comes out wrong?

In this question, the objective is:

"Currently, the event listener applies a yellow background color to the section element and its child elements when clicked. Add a condition that changes the background of the <input> elements only."

When I check the preview window, the code works just fine. But when I click "Check Work", it still comes back incorrect, stating:

"Make sure you are filtering out all but the "INPUT" tags."

What am I missing here?

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

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

section.addEventListener('click', (e) => {
    if (event.target.tagName == 'INPUT') {
  event.target.style.backgroundColor = 'blue';
    }
    });
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>

11 Answers

"Add a condition that changes the background of the <input> elements only."

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

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

It is asking you to add the conditional to the current event. Change the current even.

This works, thank you Daniel.

I'm fed up! I'm not doing this challenge anymore.

Dont feel bad, this course is falling apart towards the end.

sai meghanath marri
sai meghanath marri
5,476 Points

Below Code worked for me:

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

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

I'm losing it...hate these challenges

Katiuska Alicea de Leon
Katiuska Alicea de Leon
10,341 Points

I would get rid of the '[0]' in the variable declaration.

I did that and I still don't get the input fields to turn yellow.... nothing turns yellow ¬_¬

i used this but it still does not pass.

let section = document.getElementsByTagName('input');

for (var i = 0; i < section.length; i += 1) {
    section[i].addEventListener('click', (e) => {
      e.target.style.backgroundColor = 'rgb(255, 255, 0)';
    });
} 

i know this is so late but my guess is that your error was that you were using a for loop instead of a conditional statement.I could be wrong but i believe that that was the case .

Christian Clarke
Christian Clarke
7,963 Points

Hi:

This is old but it looks like your second block of code is unnecessary and that's what's driving the confusion. If you change the code in the first block to == 'INPUT' instead of == 'SECTION' you should pass just fine!

Robert O'Toole
Robert O'Toole
6,364 Points

i think there is a bug in this problem. i wrote exactly what Daniel wrote and it wouldn't work but then when i copy and pasted his code in to the answer it worked? bizarre

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

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

I was able to solve the challenge, but my question is why must the index ' [0] ' be included...that was were I was having an issue for it to work, I had deleted it initially because that is what Guil showed in the video lesson. Could someone explain that to me please?

I am not sure but You have used e and event. I think they have to be the same. Regards Mike

Brett Bodofsky
Brett Bodofsky
2,102 Points

Can anybody confirm this? I used Daniels code and it worked fine. But didn't notice a difference when it came to the preview. Wish the preview didn't go away so fast after getting something correct. It should be the users choice whether to continue or not after getting an answer correct.

Brett, I saw the same thing, it was actually your code I was using. I would have change it to e.target.tagName myself except it worked with out changing it. So, I wasn't going to correct you.