Was kann ich besser machen ?

  • Hallo, ich bin neu hier und habe erst mit JavaScript angefangen... zur Zeit bastle ich ne einfach FAQ Seite um funktionen hinzuzufügen usw... ich hab hier nen codepen link... die frage ist jetzt.. wo kann ich was besser machen ? Am besten mit Begründung und wie :) kann mir jemand noch erklären wie ich den Button von ausblenden zu einblenden ändern kann dieser sich aber wieder ändert wenn wieder drauf geklickt wird ? Und wie fixe ich es wenn ich einzelne Elemente ausblende, dann aber auf den button alle ausblenden gehe dann blendet er nur die aus die eingeblendet sind also nicht die ausgeblendeten einzelelemente freue mich sehr über Feedback


    https://codepen.io/Webdevinspe…gHFXL6Nb2Xds6DFDWegupjYSY

  • Alle die Variablen, die Du eingangs mit getElementById ermittelst, ändern sich im weiteren Verlauf nicht mehr und sollten als const definiert werden.


    Das Verfahren mit classList.toggle ist schon Mal gut.


    Besser nicht für jeden Unterpunkt eine eigene ID und Funktion definieren, sondern allen die selbe Klasse zuweisen, eine Nodelist mit querySelectorAll ermitteln, diese in einer Schleife abarbeiten und jeweils den Eventhandler zuweisen. Dazu musst Du im DOM navigieren und brauchst Nachbarselektoren:

    https://wiki.selfhtml.org/wiki/CSS/Selektoren/Kombinator

    Auf die Weise brauchst Du nur noch das HTML zu ändern, wenn eine weitere Frage hinzu kommt.


    Zitat

    wie fixe ich es wenn ich einzelne Elemente ausblende, dann aber auf den button alle ausblenden gehe dann blendet er nur die aus die eingeblendet sind

    Das kommt durch das classList.toggle zu Stande, verwende statt dessen classList.add.


    Zitat

    kann mir jemand noch erklären wie ich den Button von ausblenden zu einblenden ändern kann dieser sich aber wieder ändert wenn wieder drauf geklickt wird

    Lösung a): Im HTML zwei Buttons anlegen und den, der gerade nicht sichtbar ist, mit display:none; unsichtbar machen. Auch dazu kannst Du die Klasse "d-none" verwenden.

    Lösung b): Die Buttons nicht im HTML anlegen, sondern in einem Pseudoelement ::after. Auch das hat den Vorteil, dass Du nicht jedes Mal den Button berücksichtigen musst, wenn Du einen neue Frage hinzu fügst.

  • Wow super vielen Dank schonmal :) nur verstehe ich nicht ganz warum das add und nicht toggle mache ich das kann ich ja nichtmehr hin und her switchen... wie genau gehe ich vor ? ich meine dann mit .add() und .remove() oder ? wäre toll wenn du mir sagen kannst was ich genau machen muss dafür.. :D steh echt noch am Anfang... das e in der Function habe ich so aus der Schule übernommen... weiß nur leider nichtmehr wieso und wann ich es weg lassen sollt


    grüße

  • Das toggle ist schon richtig und zwar dort, wo Du den Text immer abwechselnd auf- und zumachen willst. Aber bei "Alle ausblenden" willst Du ja, dass sie unabhängig vom aktuellen Zustand unsichtbar werden, daher ist dort das add angebracht.


    Der Parameter e in deiner anonymen Funktion steht für event , das ist grob gesagt ein Objekt, das Informationen über das auslösende Ereignis enthält, in deinem Fall den Klick auf den Button. Ist hier im einzelnen beschrieben:

    https://wiki.selfhtml.org/wiki/JavaScript/DOM/Event

    Weglassen kannst Du es immer dann, wenn Du keine der Informationen darin benötigst.

  • Welche Informationen ist unter dem Link beschrieben. Ich gebe zu, dass die Infos dort ein wenig verwirrend sind, weil es so viel ist. Ein wichtiges ist target, das gibt das Element an, das das Event auslöst, in deinem Fall den Button auf den geklickt wurde. Lass dir das Event mal mit console.log ausgeben und sieh dir an, was drin steht:

    Code
            closegarantie.addEventListener("click", function (e) {
                console.log(e);
                closegarantiebody.classList.toggle("d-none");
            });

Jetzt mitmachen!

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