input elements selected by an addEventListener()

Question

Not sure I'm digging out the input text selector.

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('input');

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

Answer 1 · 2016-12-28T01:48:16Z

December 28, 2016 1:48am

Your if-statement is great. Use that without changing anything else.

They will very rarely have you edit code provided to you like the section variable. If they don't explicitly tell you to change it, then don't.

Welcome to the Treehouse Community

Looking to learn something new?

David Dehghani

David Dehghani

input elements selected by an addEventListener()

1 Answer

Philip Gales

Philip Gales

David Dehghani

David Dehghani