HTML-Elemente erstellen und diesen ein onclick-Event anheften

[Gast876543]

Hi,
mein Script soll soll einer liste Listeneinträge hinzufügen, die der User in ein input-Feld schreibt. diese Listeneinträge soll der user wieder löschen können, indem er auf den jeweiligen Eintrag klickt. Das erstellen der Listeneinträge funktioniert auch, solange man die deleteFunction-Funktion weglässt. Ich glaube mit der deleteFunction-Funktion wird der Eintrag erstellt und sofort wieder gelöscht, ohne das auf den Eintrag geklickt wird. Wo ist der Fehler?

  
var n = 0;  
var LI = new Array();  
var UL;  
  
function deleteFunction (x) {  
    UL.removeChild(x);  
    delete x;  
}  
  
function inputFunction() {  
    var text = document.getElementById("input").value;  
    LI[n] = document.createElement("li");  
    UL = document.getElementById("list");  
    UL.appendChild(LI[n]);  
    LI[n].id = "li" + n;  
    LI[n].innerHTML = text;  
    LI[n].onclick = deleteFunction(LI[n]);  
    document.getElementById("input").value = "";  
    n++;  
}  

[M.]

Wird denn der Handler richtig in den DOM eingehängt?

[unknown]

Ich glaube mit der deleteFunction-Funktion wird der Eintrag erstellt und sofort wieder gelöscht, ohne das auf den Eintrag geklickt wird. Wo ist der Fehler?

Du rufst die Funktioon auf und weist das Ergebnis der Funktion als Eventhandler zu.
Da du aber noch ein argument übergeben willst, musst du eine Clousure als Eventhandler registrieren, oder dir das Argument irgendwo anders merken. Da dein Argument das Element ist, an welchem der Eventhandler aufgerufen wird, hast du es dir implizit als this gemerkt.

function deleteFunction () {
    UL.removeChild(this); // UL als globale Variable ist nicht schön
}

LI[n].onclick = deleteFunction;

[molily]

Hallo,

Zusätzlich zu den bisherigen Antworten:
Solche Aufgaben kannst du einfacher mit Event-Delegation lösen. Dabei wird einem übergeordneten Element ein Event-Handler zugewiesen anstatt jedem Listenelement jeweils einzeln ein Event-Handler. Dadurch spart man sich auch eine Menge an Funktionsobjekten.

Grüße,
Mathias