JavaScript JavaScript and the DOM Responding to User Interaction Event Delegation

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,687 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

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

Dario Bahena
Dario Bahena
10,687 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.