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 trialTim Holt
3,409 PointsRe: 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
2,823 PointsDivya Malik
2,823 PointsHi 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.