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

Posted by charlie pollard
charlie pollard
6,471 Points

Trying to make the event listener only target the input elements of this section

I'm adding a condition with an if statement, however it's not working. It has to be my syntax, I know i have the right idea. I've tried to look it up, and it seems right to me but it still wont accept this answer

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)';
 });
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>

3 Answers

Sean T. Unwin
Sean T. Unwin
28,690 Points
Sean T. Unwin
Sean T. Unwin
28,690 Points

Hi Charlie,

Great effort!

There are two issues here.

  1. There a is left round bracket before 'INPUT'
  2. The if statement needs a closing squiggly bracket.

You should be good once those are fixed. :)

charlie pollard
charlie pollard
6,471 Points
charlie pollard
charlie pollard
6,471 Points

fixed it! thanks Sean!

Liam Clarke
Liam Clarke
19,938 Points
Liam Clarke
Liam Clarke
19,938 Points

Hi Charlie

You have done it correct however you have a syntax error, you have an opening bracket and not a closing one in your codition, you can either remove the bracket and indent the line below as its only one line or you can add a closing bracket below.

Remove

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

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

Close bracket

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

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

Good Luck!