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 Interactive Web Pages with JavaScript Traversing and Manipulating the DOM with JavaScript Perform: Appending and Removing Elements

Tim Holt
Tim Holt
3,409 Points
Posted by Tim Holt
Tim Holt
3,409 Points

Re: Appending and Removing Elements - onchange vs addEventListener('change', ...)

I noticed that if I use checkBox.addEventListener('change', checkBoxEventHandler) within the bindTaskEvents method, the list items do not toggle between the incomplete and completed lists. Even after adding the bindTaskEvents method to rebind each list item to taskCompleted and taskIncomplete, like Andrew demonstrated in this video, the behaviour only works when onchange is used within the bindTaskEvents method.

Can anyone explain why addEventListener('change', ...) would break this behaviour?

I can see from what is being logged to the console that after the first checkbox event has fired, each subsequent change event invokes both the taskCompleted and taskIncomplete methods, so in effect it does nothing. When I use onchange, only one method is invoked, as expected.

Divya Malik
Divya Malik
2,823 Points
Divya Malik
Divya Malik
2,823 Points

Hi There

In one of the videos I saw that if you use addEventListener to trigger events then we can have mutiple events attached to the same element. That might be causing the issue. For example: ele.onclick = func1; ele.onclick = func2; //now ele is linked to func2 on trigger of onclick

as opposed to:

ele.addEventListener('change', checkBoxEventHandler) ; //checkBoxEventHandler is taskIncomplete

ele.addEventListener('change', checkBoxEventHandler) ; //once you clicked on check box, you try to v checkBoxEventHandler as taskCompleted

so now after first time, ele is linked to both taskIncomplete and taskCompleted which might be causing the issue.