Javascript - check list

Der er vel ingen grund til at lave det så pisse kompliceret. Der findes et princip, der kaldes event delegation, brug det i stedet for at tilføje en listener til hver knap: http://davidwalsh.name/event-delegate .

Der er heller ikke umiddelbart nogen grund til at lave det hele i en stor funktion, del det op. Forneden er lidt pseudo kode, der beskriver hvordan det kunne gøres:

 var friendHandler = {
 
     init : function () {
         var self = this,
             friendList = document.getElementById("friendList");
 
         friendList.addEventListener("click", self.clickHandler);
         self.clickHandler = self.clickHandler.bind(self);
     },
 
     clickHandler : function (e) {
         var self = this;
 
         if(e.target && e.target.nodeName == "button") {
             var classes = e.target.className.split(" ");
 
             for(var x = 0; x < classes.length; x++) {
                 if(classes[x] == "yes" || classes[x] == "no") {
                     self.request(classes[x]);
                 }
             }
         }
     },
 
     request : function (choice) {
         // choice = yes / no
         // lav ajax her
     }
 };
 
 
 friendHandler.init();

Husk nu at fortælle hvad dit problem eller stopklods er..

Men jeg prøver at gætte. Mit gæt (og nu kan det værre jeg dummer mig fuldstændigt siden du ikke fortæller dit problem) er at din kode kører men du får det samme data modtaget. Skyldneren er ikke en bug men en feature. Eller jo det er også en bug. Bugfeaturen kaldes for en closure og problemet er at i dine handler funktioner opfanger du ikke i korrekt, men i stedet en reference til i. Men i ændrer sig i løkken og ender derfor med at være på yes.length. Så når din knap trykkes skal den sende id som er værdien af variablen i som nu er forkert.

En mulig løsning er at kalde en funktion som så laver en handler funktion til dig. Når du kalder den bliver værdien af i opfanget som parametre og du kan bruge den i kroppen. Har lavet et eksempel:

 var friendRequestYesNo = function() {
     var yes = document.getElementsByClassName("yes");
     var no = document.getElementsByClassName("no");
 
     function createButtonHandler(id, friendArg) {
         return function () {
             var xmlHttp = getXmlHttp();
             if (xmlHttp.readyState == 0 || xmlHttp.readyState == 4) {
                 xmlHttp.open("POST", BASE_PATH + "app/models/friendsModel.php", true);
                 xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                 xmlHttp.send("friends=true&addFriend=" + friendArg + "&id=" + id);
                 xmlHttp.onreadystatechange = function() {
                     if (xmlHttp.readyState == 4) {
                         if (friendArg === "yes") {
                             var xmlResponse = xmlHttp.responseXML;
                             var xmlDocumentElement = xmlResponse.documentElement;
                             alert(xmlDocumentElement.childNodes[0].nodeValue);
                         }
                     }
                  }
             }
         }
     }
 
     for (i = 0; i < yes.length; i++) {
         if (yes[i] && no[i]) {
             yes[i].onclick = createButtonHandler(i, "yes");
             no[i].onclick = createButtonHandler(i, "no");
         }
     }
 };

var yes = document.getElementsByClassName("yes");
var no = document.getElementsByClassName("no");
for(i = 0; i < yes.length; i++) {
if (yes && no) {

er yes og no listen altid lige lange ??
>if (yes && no) {
dvs elementet har 2 classe på: både yes og no
hvilke må betyde du først tilføjer personen, for derefter at slette ham igen