Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript JavaScript and the DOM (Retiring) Responding to User Interaction Event Delegation

Posted by Kim Dallas
Kim Dallas
11,461 Points

I don't understand how to do this one

how can you just change the input element and to what?

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

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

2 Answers

Dario Bahena
Dario Bahena
10,697 Points
Dario Bahena
Dario Bahena
10,697 Points

The event object contains data about the item you clicked. if you check the event for the tag name of input you can apply the style to only the inputs

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

section.addEventListener('click', (e) => {
// this is the condition you are missing
  if (e.target.tagName == 'INPUT'){
    e.target.style.backgroundColor = 'rgb(255, 255, 0)';
  }
});
Kim Dallas
Kim Dallas
11,461 Points
Kim Dallas
Kim Dallas
11,461 Points

thank you Dario. I get stuck on if statements. and loops. I don't know why

Dario Bahena
Dario Bahena
10,697 Points
Dario Bahena
Dario Bahena
10,697 Points

You will definitely want to master if statements and loops. Code is usually composed of %80 “if” and loops and %20 other stuff (roughly). So knowing that, focus on mastering that and everything else becomes easier.