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

Abbas Hussain
Abbas Hussain
11,357 Points

event.target.tagName or not?

how can you ensure they're text inputs that trigger the click event?

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>
app.js
let section = document.getElementsByTagName('section')[0];

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

8 Answers

Jason Myers
Jason Myers
6,443 Points

why didn't i think of that i'm so stupid, and thanks this helped

Mohammed Zeeshan
PLUS
Mohammed Zeeshan
Courses Plus Student 3,302 Points

Why should be it need to be capitalised? sorry if its a dumb question

I quit this challenge. I'm fed up, nothing I do is right. I'm so stupid its pathetic!

Henrik Christensen
seal-mask
.a{fill-rule:evenodd;}techdegree
Henrik Christensen
Python Web Development Techdegree Student 38,322 Points

Two things Lynn Collins :

  • this (event.target.tagName == 'INPUT') should be an if-statement
  • the if-statement should be inside the eventlistener

Example:

section.addEventListener('click', e => {
    if (e.target.tagName == 'INPUT') {  // notice event -> e here 
        // do something
    }
});

I quit! Been at it for hours, tried your suggestion, and feel like crying. I'm so mad at myself. Something is wrong and I don't know what. I'm resending this to see what else can be suggested.

Henrik Christensen
seal-mask
.a{fill-rule:evenodd;}techdegree
Henrik Christensen
Python Web Development Techdegree Student 38,322 Points

The solution would be:

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

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

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

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

(event.target.tagName == 'INPUT') { e.target.style.backgroundColor = 'rgb(255, 255, 0)'; } }); This is what I posted. I'm not very bright sometimes I guess

Thank you.

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

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

section.addEventListener('click', e => { if (e.target.tagName == 'INPUT') {
e.target.style.backgroundColor = 'blue';

}

});

Hi Henrik, Thank you so much! I am so sorry I was irritated and angry but I hate when I continue trying at something and I don't get it right..... somehow I really need to work on my frustration tolerance. Needs a boost, seriously. Finally cracked it after having been at it for hours.

Henrik Christensen
seal-mask
.a{fill-rule:evenodd;}techdegree
Henrik Christensen
Python Web Development Techdegree Student 38,322 Points

We've all been there, trust me :-)

Sometimes those challenges takes time and sometimes you might have to re-watch the videos, check the community, google etc..

The most important thing is that you keep trying, even if it seems impossible some times :-)