Search code examples
javascriptfunctiondelegation

Wrong parent selected from Javascript functions

First of: I am new to Javascript and trying to learn the principles.

I am trying to create a simple ToDo app in Javascript. It's almost working but I am stalling on the following:

When I add a task an HTML component gets appended to an UL for incompleted tasks. When I try to delete it, it always deletes the last LI in the list. Same goes for editting. When I click edit it always shows the edit input for the last LI in the uncompleted list.

Code here & working example here: http://tinyurl.com/gw29re9

I know it's a chunk of code. But could someone maybe take a look at it? I can't seem to figur out what I am doing wrong.

function locations:

  • bind events to delete & edit buttons @rule 74, 89
  • Delete parent & Edit function @rule 25, 32
Solution

  • if you place Eventlistners in a loop you should do it like that:

    for(var i = 0; i < array.length; i++){
   (function (index) {
       eventlistner...
   })(i);
}