JavaScript JavaScript and the DOM Responding to User Interaction Event Delegation

Arihant Tripathy
Arihant Tripathy
7,952 Points

My code works but it is marked as incorrect!

I tried my code in the editor and it works, but it was marked incorrect.

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.querySelector('ul');

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

2 Answers

Brendan Whiting
MOD
Brendan Whiting
Front End Web Development Treehouse Moderator 83,030 Points

Somehow line 1 got changed and is now selecting the ul instead of the section. Still works, but I guess Treehouse's test cases wanted it to be the section.

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

I changed "e" to event and used the strict comparison (===).