JavaScript JavaScript and the DOM Responding to User Interaction Event Delegation

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
MOD
Sean T. Unwin
Treehouse Moderator 28,323 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. :)

Liam Clarke
MOD
Liam Clarke
Treehouse Moderator 19,187 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!