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
Abbas Hussain
11,357 Pointsevent.target.tagName or not?
how can you ensure they're text inputs that trigger the click event?
<!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>
let section = document.getElementsByTagName('section')[0];
if ('event.target.tagName == '') {
section.addEventListener('click', (event) => {
event.target.style.backgroundColor = 'rgb(255, 255, 0)';
});
};
8 Answers
Henrik Christensen
Python Web Development Techdegree Student 38,322 PointsTheir tagname is "input" so it would be
e.target.tagName == 'INPUT'
Mohammed Zeeshan
Courses Plus Student 3,302 PointsWhy should be it need to be capitalised? sorry if its a dumb question
Lynn Collins
10,080 PointsI quit this challenge. I'm fed up, nothing I do is right. I'm so stupid its pathetic!
Henrik Christensen
Python Web Development Techdegree Student 38,322 PointsTwo 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
}
});
Lynn Collins
10,080 PointsI 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
Python Web Development Techdegree Student 38,322 PointsThe 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)';
}
});
Lynn Collins
10,080 Pointslet 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
Lynn Collins
10,080 PointsThank you.
Lynn Collins
10,080 Pointslet 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';
}
});
Lynn Collins
10,080 PointsHi 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
Python Web Development Techdegree Student 38,322 PointsWe'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 :-)
Jason Myers
6,443 PointsJason Myers
6,443 Pointswhy didn't i think of that i'm so stupid, and thanks this helped