JavaScript JavaScript and the DOM Responding to User Interaction Event Delegation

Mykiel Horn
Mykiel Horn
Full Stack JavaScript Techdegree Student 3,964 Points

How come I keep getting an undefined "Bummer" error with my code?

I tried doing the following lines of code: let section = document.getElementsByTagName('section'); let section = document.querySelectorAll( 'section ul' ); let section = document.querySelectorAll( 'section ul' )[0]; let section = document.getElementsByTagName( 'section' )[4]; Sometimes I get the 'You didn't filter out the right elements' but I have no idea what I am filtering out.

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

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

1 Answer

In the listener that has been added to the section element you need to ensure that the input with the type of text are the only children that trigger the background change not the entire list item.

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

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

Happy Coding! - Chan