Mehrere btn, weniger code, tipps?

  • Hy,

    ich versuche gerade meinen kompletten code schlanker zu machen. Mein problem ist das ich mehrere 'clicks' habe die eigentlich das selbe machen nur andere werte haben. Nach einigen recherche habe ich etwas gefunden mit querySelectorAll(); denke das es ein falscher weg ist. Und durchs experimentieren habe ich sowas rausgefunden:


    HTML:

    Code
    <div class="bg">
      <div class="container" id="btn1">btn 1</div>
      <div class="container" id="btn2">btn 2</div>
      <div class="container" id="btn3">btn 3</div>
      <div class="container" id="btn4">btn 4</div>
      <div class="container" id="btn5">btn 5</div>
      <div class="container" id="ausgabe">output</div>
      
    </div>

    CSS:

    JS:

    Bisher habe ich nix gefunden wie ich es am besten machen könnte. Als ergebnis bekomme ich hier die ID ausgespuckt. Kann ich mir da noch etwas anderes ausspucken lassen? Bzw. Wie kann die die ID weiter verwenden für eine function? zb. ausgabe soll ID ausspucken mit innerText und soll eingefärbt werden (zb. btn1 = blau, btn2 = grün, ...) Ich weis nicht wie ich mit der information umgehen soll.


    https://codepen.io/Noobie_Chan/pen/qBdjwWQ?editors=1010


    Ps: this ist mir noch etwas fremd, habe das noch nicht so ganz verstanden. Hat wer ein kleine bsp. zur verwendung?


    Bin für jede hilfe dankbar! =)

  • Zitat

    Nach einigen recherche habe ich etwas gefunden mit querySelectorAll(); denke das es ein falscher weg ist.

    Ich denke, dass das genau der richtige Weg ist. Mit querySelectorAll() kannst Du eine Liste der Elemente erzeugen, wenn Du die Klasse als Selektor verwendest. Dann kannst Du mit einer forEach-Schleife diese Elemente abarbeiten und mit der Funktion addEventListener() deine Funktion btnClick registrieren.

  • Nein, da bist Du jetzt etwas auf dem falschen Wege. Die forEach-Schleife auf das Ergebnis von querySelectorAll() anwenden:

    Code
    document.querySelectorAll(.btn).forEach(function(item, idx) {
        item.addEventListener('click', btnClick);
    });

    In der Funktion btnClick hast Du dann wieder über this Zugriff auf den geklickten Button. Oder alternativ über event.target.

  • Hab mir das mehre male versucht anzugucken aber irgentwie habe ich ein hänger. Mit querySelectorAll(...) kann ich mir mehrer "element, klassen, etc." sammeln/suchen. Es verhaltet sich/ist wie ein array? Ich versuche auf das zuzugreifen aber irgentwie greif ich ins leere. Ich sehe nicht was ich da habe. Die forEach habe ich verstanden. "forEach( elem, index)" https://codepen.io/Noobie_Chan/pen/qBdjwWQ?editors=1010 da habe ich ein wenig herum probiert, versucht das output mir ausgibt welcher btn ich gedrückt habe.

  • Dein Code sieht ja so aus:

    Wenn Du elem und index an die Funktion btnClick übergeben willst, kannst Du diese Funktion nicht als Referenz übergeben sondern musst die Parameter explizit übergeben:


    Wenn Du die Funktion als Referenz übergibst, hast Du jedoch Zugriff auf den geklickten button über this :


  • hmm... Bildlich stelle ich es mir so vor wenn ich Button 1 drücke:


    querySelectorAll('.btn') würde so aussehen?: ("Array")

    Code
    ... .... = [
       <div class="container btn">btn 1</div>,
      <div class="container btn">btn 2</div>,
      <div class="container btn">btn 3</div>,
      <div class="container btn">btn 4</div>,
      <div class="container btn">btn 5</div>,
    ];

    das wäre "gespeichert" & mit this greif ich auf:


    Code
    <div class="container btn">btn 1</div>

    und mit .innerText greife ich dann auf:

    Code
    <div class="container btn">btn 1</div>,

    verstehe ich das mal so richtig?

  • Denke schon, dass Du das richtig verstehst. querySelectorAll liefert eine Nodelist, das ist im wesentlichen ein Array und im Clickhandler liefert this das geklickte Element. Und innerText dann den Text des div.

Jetzt mitmachen!

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