Unendlich Schleife mit rekursiven Javascript-Funktionen

Question

Ich arbeite an einem Back-Office für einen Fotografen, wo die Fotos in Alben mit Unterkategorien sein würden.
Ich verwende JavaScript in der Albumerstellungsseite, um einen neuen .photo-Block (mit seinem HTML-Inhalt) hinzuzufügen.
Das Problem ist, dass ich scheinbar eine Endlosschleife mit der Funktion albums.addPhoto bekomme. Hier ist mein JS-Code (albums.addPhoto von onclick Attributen aufgerufen und ruft albums.createBlock):

var albums = { 
    createBlock: function (tag, attributes, text, elemID, elemCLASS) { 
     var block = document.createElement(tag); 
     switch (tag) { 
      case "label": 
      block.setAttribute('for', attributes[0]); 
      break; 
      case "input": 
      block.setAttribute('type', attributes[0]); 
      block.setAttribute('name', attributes[1]); 
      if (attributes[0] == "text") { 
       block.setAttribute('placeholder', attributes[2]); 
      } else { 
       block.setAttribute('value', attributes[2]); 
      } 
      break; 
      default: 

     } 

     if (text) { 
      block.textContent = text; 
     } 
     if (elemID) { 
      block.id = elemID; 
     } 
     if (elemCLASS) { 
      block.classList.add(elemCLASS); 
     } 

     return block; 
    }, 
    addPhoto: function (currentSsCat, requiredPhotoID) { 
     var elem = albums.createBlock("div", null, false, ("photo_" + currentSsCat + "_" + requiredPhotoID), "photo"); 
     document.querySelector('#ss_cat_1').appendChild(elem); 

     elem.appendChild(albums.createBlock("label", ["file_" + currentSsCat + "_" + requiredPhotoID], "Importez le fichier photo", false, false)); 
     elem.appendChild(albums.createBlock("input", ["file", ("file_" + currentSsCat + "_" + requiredPhotoID), "Votre photo"], false, false, false)); 
     elem.appendChild(albums.createBlock("label", ["ref_" + currentSsCat + "_" + requiredPhotoID], "Référence de la photo", false, false)); 
     elem.appendChild(albums.createBlock("input", ["text", ("ref_" + currentSsCat + "_" + requiredPhotoID), "Exemple: 20160811_CLS_0005"], false, false, false)); 
     elem.appendChild(albums.createBlock("label", ["desc_" + currentSsCat + "_" + requiredPhotoID], "Description de la photo", false, false)); 
     elem.appendChild(albums.createBlock("input", ["text", ("desc_" + currentSsCat + "_" + requiredPhotoID), "Exemple: Paolo FABBRI et Lenas Drawin His Gun (ITA)."], false, false, false)); 

     document.querySelector("#add_photo_" + currentSsCat).onclick = albums.addPhoto(currentSsCat, (requiredPhotoID + 1)); 
    } 
}; 

Dann haben Sie den HTML-Teil (Ich gebe Ihnen nur den form Teil, ich kann die ganze Seite senden, aber es würde nutzlos glaube ich):

<form action="index.html?page=aa" method="post"> 
<!-- SOUS CATEGORIE --> 
     <div class="ss_cat" id="ss_cat_1"> 
      <label for="ss_cat_1_titre">Titre :</label> 
      <input type="text" name="ss_cat_1_titre" placeholder="Titre de la sous-catégorie..."> 

      <!-- PHOTOS DE LA CATEGORIE --> 
      <div class="photo" id="photo_1_1"> 
       <label for="file_1_1">Importez le fichier photo :</label> 
       <input type="file" name="file_1_1" value="Votre photo"> 
       <label for="ref_1_1">Référence de la photo :</label> 
       <input type="text" name="ref_1_1" placeholder="Exemple: 20160811_CLS_0005"> 
       <label for="desc_1_1">Description de la photo :</label> 
       <input type="text" name="desc_1_1" placeholder="Exemple: Paolo FABBRI et Lenas Drawin His Gun (ITA)."> 
      </div> 
     </div> 


     <!-- This is the link calling the function albums.addPhoto --> 
     <a href="#" class="btn" id="add_photo_1" onclick="albums.addPhoto(1, 2)">Ajouter une photo</a> 
    </div> 
    <a href="#" class="btn" id="add_ss_cat">Ajouter un sous-catégorie</a> 
    <input type="submit" name="submit" value="Ajouter le nouvel album"> 
</form> 

Prüfung: die Funktion macht seinen Job, aber mit einer Endlos-Schleife (Browser abstürzt oder mich fragen, ob ich das Drehbuch stoppen will, die sho ws eine riesige Anzahl von .photo Blöcken wurden erstellt).
Auf Chrome bekomme ich die Nachricht maximum call stack size exceeded und auf Firefox bekomme ich too much recursion.

PS: Dies ist mein erster Versuch, ein Backoffice zu erstellen, wenn Sie irgendwelche Vorschläge zu alternativen Methoden haben, fühlen Sie sich frei. Danke fürs Lesen und für Ihre Hilfe.

Answer 1

Das ist Ihr Problem:

document.querySelector("#add_photo_" + currentSsCat).onclick = albums.addPhoto(currentSsCat, (requiredPhotoID + 1)); 

Sie bedingungslos albums.addPhoto innerhalb albums.addPhoto so fordern es gibt eine unendliche Rekursion. Wahrscheinlich wollen Sie diese stattdessen:

document.querySelector("#add_photo_" + currentSsCat).onclick = function() { albums.addPhoto(currentSsCat, (requiredPhotoID + 1)); }; 

Auf diese Weise können die Onclick-Handler auf eine Funktion eingestellt, nicht das Ergebnis der Funktion (die nicht definiert ist und Sinn sowieso nicht machen) und es läuft nur, wenn es eine ist Klicken Sie auf Ereignis.