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

Phillip Rowe
PLUS
Phillip Rowe
Courses Plus Student 13,741 Points
Posted by Phillip Rowe
Phillip Rowe
Courses Plus Student 13,741 Points

what is wrong with my code? It appears to have the desired effect.

a

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

2 Answers

Alexander Davison
Alexander Davison
65,469 Points
Alexander Davison
Alexander Davison
65,469 Points

Don't put the input string into the event handler, you need to change what the section variable is selecting.

Try this:

let section = document.getElementsByTagName("input");

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

I hope this helps. ~Alex

Marcin Czachor
Marcin Czachor
9,641 Points
Marcin Czachor
Marcin Czachor
9,641 Points

The only thing you should do is write if statement to determine which html element should change its background-color when you click it. If you preview code given in this task you will notice that clicking any element within <section> element change its background-color to yellow.

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)';
   }
});