confused

Question

In the listener that has been added to the section element, ensure that the text input elements are the only children that trigger the background-changing behavior.

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.getElementsByTagName('section')[0];

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

Answer 1 · 2018-01-30T17:49:26Z

January 30, 2018 5:49pm

You won't want to change the line that applies the color change. It should remain as provided, but you will need to wrap it in a conditional block.

This instructions say to "ensure that the text input elements are the only children that trigger the background-changing behavior", so you'll want to test the event target to be sure it is one of the text input elements.

Welcome to the Treehouse Community

Looking to learn something new?

skylar stanley

skylar stanley

confused

1 Answer

Steven Parker

Steven Parker