What if there were other different types of input elements?

Question

I've got the answer, but I was wondering "What if the list of inputs included a mix of different types (radio, checkbox, etc.) in addition to text?" How would you zero in on only the inputs of type text while ignoring the other types of input?

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) => {
    if (e.target.tagName == 'INPUT') {  
    e.target.style.backgroundColor = 'rgb(255, 255, 0)';
  }
});

Answer 1 · 2017-08-26T00:58:27Z

August 26, 2017 12:58am

You could test the type property, for example:

    if (e.target.tagName == 'INPUT' && e.target.type == "text") {
        // do stuff just for text inputs here
    }

Welcome to the Treehouse Community

Looking to learn something new?

Nicholas Gaerlan

Nicholas Gaerlan

What if there were other different types of input elements?

1 Answer

Steven Parker

Steven Parker