JavaScript JavaScript and the DOM Responding to User Interaction Event Delegation

Cesar Abeid
Cesar Abeid
2,544 Points

I can't find a solution for this and can't move forward. Any tips?

This one is a bit over my head and I can't find a solution.

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


section.addEventListener('click', (e) => {
  let input = document.getElementsByTagName('input');
  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

Daniel Turato
PRO
Daniel Turato
Java Web Development Techdegree Graduate 30,087 Points

So, you need to change the background color based on a condition of the element clicked being an input element. As it's a condition check, you can use an if statement. Now to see what type of element was clicked, you can use target.tagName on the event to compare it to what you desire (an input element) like so:

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

Also, tagNames are in capitals. Hope this helps

Cesar Abeid
Cesar Abeid
2,544 Points

Brilliant. I think I was having a hard time understanding the question! Thank you so much.