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

Question

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

Answer 1 · 2018-11-13T14:00:20Z

November 13, 2018 2:00pm

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

Welcome to the Treehouse Community

Looking to learn something new?

Mykiel Horn

Mykiel Horn

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

1 Answer

toxic

toxic