Aktualisieren Sie nur die hinzugefügten JavaScript-Elemente beim zweiten Klick.

Question

Ich habe Javascript-Code, der Werte von einem Array abruft, das eine HTTP-Antwort von einem Server verarbeitet und Schaltflächen zu einem modalen Fenster hinzufügt. Die IDs für die Schaltflächen stammen also aus dem Array. Auf den zweiten Klick ist alles in Ordnung und meine Tasten werden dem modalen Fenster hinzugefügt. Aber wenn ich die Funktion beim nächsten Mal wieder aufrufe, sollten die Buttons nur noch aktualisiert werden. Wie kann ich damit umgehen, dass die Funktion die Schaltflächen nur beim zweiten und weiteren Klicken aktualisiert?

buttonContainer = document.getElementById('modal1');     
     for (i = 0; i < resultContainers.length; i++) { 
      newButton = document.createElement('input'); 
      newButton.type = 'button'; 
      newButton.value = resultContainers[i]; 
      newButton.id = resultContainerValues[i]; 
      newButton.class = 'buttonContainer'; 
       if (newButton.id == 'true') { 
        newButton.style.backgroundColor = '#8cff1a'; 
       }; 
      newButton.onclick = function() { 
       alert('You pressed '+this.id); 
      }; 
      buttonContainer.appendChild(newButton); 

Answer 1

Sie müssen prüfen, ob die Schaltfläche bereits vorhanden ist, bevor Sie sie in diesem Fall hinzufügen. Da Sie die ID der Schaltfläche kennen, die Sie gerade erstellen, können Sie sehen, ob bereits eine Schaltfläche mit dieser ID vorhanden ist, und diese stattdessen aktualisieren.

var newButton = document.getElementById(resultContainerValues[i]); 
if(newButton!=null) { 
    newButton.value = resultContainers[i]; 
} else { 
    newButton = document.createElement('input'); 
    newButton.type = 'button'; 
    newButton.value = resultContainers[i]; 
    newButton.id = resultContainerValues[i]; 
    newButton.class = 'buttonContainer'; 
    if (newButton.id == 'true') { 
     newButton.style.backgroundColor = '#8cff1a'; 
    } 
    newButton.onclick = function() { 
     alert('You pressed '+this.id); 
    }; 
    buttonContainer.appendChild(newButton); 
}