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

Greg Schudel
Greg Schudel
4,090 Points
Posted by Greg Schudel
Greg Schudel
4,090 Points

Bummer! There was an error with your code: TypeError: 'undefined' is not an object (evaluating 'section.addEventListene

What am I doing wrong? I am not sure what is being asked and why my code does not fulfill the task?

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('li').textContent;

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

3 Answers

Steven Parker
Steven Parker
229,783 Points
Steven Parker
Steven Parker
229,783 Points

One of my previous hints was "You don't want to change the provided code." , but you changed the selector of the statement on the top line so it no longer selects the first section element but instead now selects the first input element. So you should leave that line as it is provided by the challenge.

Otherwise, your conditional is good and should pass the challenge.

The variable "e" represents the event object that is passed by the system to any event handler. It's used by both your code and the provided color-change code to access the specific element that was clicked on (the target).

If you're sure this wasn't discussed in the course, you may want to report it as a bug to Support.

Greg Schudel
Greg Schudel
4,090 Points
Greg Schudel
Greg Schudel
4,090 Points

Steven,

I would like to commend you on how often you are patient, clear and to the point when communicating your answers. I have scoured much of the Community help forum here and see such a great job you do. I'm sure you don't get much appreciation, but thanks for helping other people like me who sometimes just don't get it. Thanks for being you man! (I still definitely think your Peter Parker, just with an extra attempt to hide your alternate identity!, lol)

Steven Parker
Steven Parker
229,783 Points
Steven Parker
Steven Parker
229,783 Points

Thanks for the great comment. I truly enjoy helping in itself, but I also do get appreciative feedback in the forms of both comments and "best answer" votes. And this may be my 2nd favorite comment (only because the first was from a female student who said she wanted to kiss me). :blush:

Happy coding!

Steven Parker
Steven Parker
229,783 Points
Steven Parker
Steven Parker
229,783 Points

You don't want to change the provided code. It already does the job; but since this is a delegated handler, you can currently click on any element in the section and change the color.

The challenge wants you to add a conditional to make sure this change only happens when you click on an input element.

Greg Schudel
Greg Schudel
4,090 Points
Greg Schudel
Greg Schudel
4,090 Points

Listen,

I am beyond frustrated with this problem. I have rewatched the video, checked ALL the questions in the discussion panel and I am COMPLETELY clueless why I cannot get the code right. I keep on getting this error:

Bummer! There was an error with your code: TypeError: 'null' is not an object (evaluating 'input.click')

Below is my code

let section = document.getElementsByTagName('input')[0]; 
// why is it is that when the 'e' is erased was giving me an error saying my function below is not a function, why???????


section.addEventListener('click', (e) => { 
//why is 'e' here when that was never used in the video?

  if ( e.target.tagName === 'INPUT' ) {

    e.target.style.backgroundColor = 'rgb(255, 255, 0)';

  }


});

Why is this not right????????

Also, are there any courses on how to debug JS using the chrome dev tools on treehouse? I feel like I am relying way too much on the forum for identifying my problems with my code. Also, I can take the same code above put it in the browser with zero errors. When I use that same code for the quiz, i get errors, why is that the case?