variablem Button eine Funktion zuweisen

  • Hallo zusammen,


    ich habe leider schon wieder ein Problem bei dem ich leider hänge, vermutlich aber wieder nur einen Denkfehler habe. ;)


    Ich habe eine Telefonliste mit Mailadressen, welche ich mit einem Button in ein separates div kopiere. Nun soll die Möglichkeit bestehen, die jeweiligen gewählten Adressen auch wieder aus dem div zu löschen. Dafür gebe ich jedem Adresse einen Button als child mit, welcher dann wieder auf eine Funktion zugreifen soll.

    Prinzipiell funktioniert das auch, allerdings immer nur mit der letzten kopierten Adresse. Die Adressen und den Button füge ich so in das div ein:


    JavaScript
    document.getElementById('MailErgebnisse').innerHTML=document.getElementById('MailErgebnisse').innerHTML + '<p id="'+this.value+'">'+this.value+'</p>';
    var loeschKnopf=document.createElement('Button');
    loeschKnopf.innerHTML='X';
    loeschKnopf.id='loesch'+this.value;
    loeschKnopf.value='loesch'+this.value;
    loeschKnopf.className='LöschKnopf';
    loeschKnopf.addEventListener('click', MailLoeschen);
    document.getElementById(this.value).appendChild(loeschKnopf);


    Ich weiß, zumindest mit dem einfügen des '<p>' habe ich es mir einfach gemacht, aber das kann ja nicht der Grund sein warum die Funktion immer nur beim zuletzt zugefügtem Button überthaupt anspringt? In der Funktion 'MailLoeschen' wird bisher nur ein Alert ausgelöst, daran liegt es also nicht.

    Die Funktion nutze ich fast identisch noch einmal an anderer Stelle, und hier startet jeder Button die gewünschte Funktion.


    Hofffe habe es verständlich geschrieben?


    Besten Dank schon einmal für kreative Vorschläge...

  • Meinst du das so in der Art

    https://basti1012.bplaced.net/…rdner=html-seminar&id=350


    Das passt zwar nicht zu dein Vorhaben aber zeigt dir wie man mit einem erstellten Button auch einen dazu gehörigen Eintrag löschen kann.

    Ich denke mal, dass ich das richtig verstanden habe, was du wolltest.


    Deine Mails und was auch immer du da noch reinbauen wolltest, müssen in diesem Beispiel halt nur eindeutig (zb durch id ) sein damit die Buttons auch das richtige löschen.


    Man kann das sicherlich auch noch anders machen ,doch dazu wäre es gut, wenn du mal genauer zeigst, was du da vorhast und schon mal Vorarbeit machst und dann kann man mal gucken ob es noch einfacher geht und so

  • Wahrscheinlich liegt das Problem nicht in dem Code, den Du gepostet hast, sondern im Umfeld:


    Wie sieht die Funktion MailLoeschen aus? Woher weiß diese, welches Element gelöscht werden soll?


    Und wie sieht das Umfeld deines Codes oben aus? Vermutlich in einem Eventhandler, der für einen Button registriert ist?

  • Hallo Basti,


    danke schon einmal, das wäre dann schon einmal die Antwort auf die Frage die wahrscheinlich als nächstes von mir gekommen wäre. ;)

    Mein Problem ist, dass jeder Button auf die gleiche Funktion zugreifen soll, das aber aus irgendeinem Grund nur mit dem jeweils letzten Button funktioniert. Der Rest zeigt keine Fehler an, scheint aber auch keinerlei Click-Event zu haben. Eigentlich übergebe ich den EventListener doch richtig, oder nicht?

    Wie gesagt, momentan ist in der Function ein schlichter Alert Befehl, also an der Funktion die aufgerufen werden soll liegt es nicht, daher kann ich es mir nicht erklären.

    Als Beispiel habe ich diesen Codeteil ebenfalls auf der gleichen Seite, und hier funktioniert alles wie gewünscht:

    Ist ja das gleiche Prinzip, daher finde ich meinen Fehler nicht. Die Buttons zum Löschen habe ich jetzt auch schon geändert, damit ich auch wirklich eine eindeutige ID für jeden habe, ändert aber an dem Event Listener ja leider nichts...

  • Wahrscheinlich liegt das Problem nicht in dem Code, den Du gepostet hast, sondern im Umfeld:


    Wie sieht die Funktion MailLoeschen aus? Woher weiß diese, welches Element gelöscht werden soll?


    Und wie sieht das Umfeld deines Codes oben aus? Vermutlich in einem Eventhandler, der für einen Button registriert ist?

    Hallo Sempervivum,


    hier mal der Code komplett (zumindest die Teile die es betrifft), wie gesagt, die Funktion MailLoeschen hat eigenltich noch nichts zu tun:

    Die HTML Datei ist dabei nicht so spannend an dem Teil:

    HTML
    <div id='gespeicherteMails'>
    <p id='MailUeber'>gespeicherte Mailadressen:</p>
    <div id='MailErgebnisse'></div>
    </div>

    Wie gesagt, prinzipiell funktioniert es ja, die Funktion wird ja vom jeweils zuletzt hinzugefügten auch ausgeführt, aber eigentlich sollte doch jeder Button den ich über die Funktion 'MailÜbernehmen' erstelle auch auf die Funktion 'MailLoeschen' zugreifen können, und eben nicht nur der Letzte?


    Aber Danke schon einmal für eure Hilfe. ;)

  • Also hatte ich die Antwort quasi vor der Nase, als ich sagte dass ich es mir mit dem p-Element wahrscheinlich etwas zu leicht gemacht habe. ;)

    So klappt es!


    Danke dir erneut vielmals...

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!