Gleiche Funktion öfter verwenden

  • Hallo, ich mach aufjedenfall was falsch... ich möchte die selbe Funktion auf das selbe Element mehrfach verwenden... aber es führt logischerweise die zweite Funktion aus... da von oben nach unten... ich suche mal nach einer anderen Möglichkeit statt toggle zu verwenden, weil ich dann auch nicht extra css Klassen anlegen müsste... wäre es möglich dass wenn ich zB bei diesem Beispiel die Hintergrundfarbe ändern kann.. nach dem zweiten klick wieder rückgängig machen kann..


    Code
    1. box1.addEventListener("click", function(e){
    2. content.style.backgroundColor="#f3f345"
    3. })
    4. box1.addEventListener("click", function(e){
    5. content.style.backgroundColor="#fff"
    6. })
  • so nicht . Du könntest eine Variable erstellen die true und false hat ,nachdem man geklickt hat.Das fragt man mit ener if abftage ab und hat dann sowas wie ein toggle Button.

    Aber wozu ? Toggle ist doch dafür da um sowas zu machen

  • Der Grund, warum das nicht funktioniert ist folgender: Die Funktion addEventListener tut das, was der Name wortwörtlich sagt: Sie fügt den Listener hinzu und ersetzt ihn nicht etwa. Daher wird bei dir mit jedem Klick ein weiterer Listener registriert und die anderen bleiben erhalten. Wenn das, was Du vor hast, funktionieren will, musst Du jedes Mal den alten Listener entfernen, bevor Du den neuen hinzu fügst:

    https://wiki.selfhtml.org/wiki…arget/removeEventListener

    Ich stimme aber Basti zu: Ich sehe keinen Vorteil bei diesem Verfahren, wird nur unnötig kompliziert.

  • Ich suche nur alternativen :D ich mein nächstes Jahr um die Zeit schreibe ich die Abschlussprüfung zum Mediengestalter Digital und Print.. und da kommt im Praxisteil eben auch JavaScript dran.. ich suche weitere Wege, wegen der Übersichtlichkeit... ich habe die Angst wenn ich mehrere Zeilen Toggles dabei habe dass mir Punkte abgezogen werden wegen Mehrfachverwendung die zB unnötig oder unübersichtlich wären

  • Ich suche nur alternativen :D ich mein nächstes Jahr um die Zeit schreibe ich die Abschlussprüfung zum Mediengestalter Digital und Print.. und da kommt im Praxisteil eben auch JavaScript dran.. ich suche weitere Wege, wegen der Übersichtlichkeit... ich habe die Angst wenn ich mehrere Zeilen Toggles dabei habe dass mir Punkte abgezogen werden wegen Mehrfachverwendung die zB unnötig oder unübersichtlich wären

    Bei diesen Beispiel wäre Toggle ja schon übersichtlicher.

    Punkte abzug kann ich nix zu sagen.Das aber immer wieder gleicher Code vorkommen kann läßt sich ja nicht ändern.Wenn du 100 mal toggle auf der Seite nutzen mußt dann ist das halt so. Du kannst deinen Kunden ja nicht sagen das der Code doppelt so lang wird weil sonst der Quellcode immer gleich aussieht. Ich denke mal das es heute auf funktionalität , übersichtlichkeit , ankommt. Auch unnörig viel Code zu produzieren den man nicht brauchen würde wäre für mich auch wichtig.


    Nur weiß ich nicht wie das hete ist bei so einer Prüfung und wie und was da gelernt wird und worauf geachtet wird.

    lernt ihr da HTML5 ? Oder noch alte Versionen ?


    Hier ist mal meine altenative zu toggle

    Vieleicht kennt ja noch wer nee andere möglickeit eine toggle function klein zu halten

  • Wenns eh nur um zwei Farben geht:

    JavaScript
    1. btn = document.querySelector('button');
    2. btn.addEventListener('click', function(e) {
    3.     this.style.backgroundColor = this.style.backgroundColor == 'red' ? 'blue' : 'red';
    4. });