Mehrere btn, weniger code, tipps?

Noobie_Chan · 19. März 2020

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:

Code

.bg {
  background-color: lightgreen;
  height: 8rem;
  padding-top: 4rem;
  padding-left: 3rem;
  width: 50%;
  margin-left: auto;
  margin-right: auto;
  
}
.container {
  background-color: lightgrey;
  display: inline-block;
  height: 2rem;
  width: 100px;
  border: 1px solid grey;
  padding-top: .8rem;
  margin-top: .5rem;
  margin-left: .3rem;
  margin-right: .3rem;
  text-align: center;
}

.activ {
  background-color: lightblue;
  border: 1px solid blue;
}

Alles anzeigen

JS:

Code

var btnClick = function(){
  const choose = this.id;
  const output = document.getElementById('ausgabe');
  
  output.innerText = 'Klick: ' + choose;
  
}

document.getElementById('btn1').onclick = btnClick;
document.getElementById('btn2').onclick = btnClick;
document.getElementById('btn3').onclick = btnClick;
document.getElementById('btn4').onclick = btnClick;
document.getElementById('btn5').onclick = btnClick;

Alles anzeigen

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! =)

Sempervivum · 19. März 2020

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.

Noobie_Chan · 19. März 2020

Wäre so der grundaufbau richtig?

JS:

Code

var btnClick = function(){
  const output = document.getElementById('ausgabe');

  /*hier die forEach-schleife?*/
  
}

document.querySelectorAll(.btn).onclick = btnClick;

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

Sempervivum · 19. März 2020

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.

Noobie_Chan · 19. März 2020

Hab mir das angesehen, problem:

document.querySelectorAll(.btn).forEach(function(item, idx)

da stört ihm beim .btn der punkt. SyntaxError

Sempervivum · 19. März 2020

Oh, mein Fehler, dass muss in Anführungszeichen.

Noobie_Chan · 21. März 2020

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.

Sempervivum · 21. März 2020

Dein Code sieht ja so aus:

Code

var btnClick = function(){
  const output = document.getElementById('ausgabe');
  
  //let nodeItem = elem.item(index)
  
  const test = document.querySelector('.btn')
  output.innerText = 'Klick: ' +  this.innerText;
  
};

document.querySelectorAll('.btn').forEach( function (elem, index) {
  elem.addEventListener('click', btnClick);
});

Alles anzeigen

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:

Code

var btnClick = function(elem, index){
  const output = document.getElementById('ausgabe');
  
  //let nodeItem = elem.item(index)
  
  //const test = document.querySelector('.btn')
  output.innerText = 'Klick: ' +  elem.innerText;
  
};

document.querySelectorAll('.btn').forEach( function (elem, index) {
  elem.addEventListener('click', function() {
    btnClick(elem, index);
  });
});

Alles anzeigen

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

Code

var btnClick = function(){
  const output = document.getElementById('ausgabe');
  
  //let nodeItem = elem.item(index)
  
  //const test = document.querySelector('.btn')
  //Unter this hast Du Zugriff auf den Button, der geklickt wurde:
  output.innerText = 'Klick: ' +  this.innerText;
  
};

document.querySelectorAll('.btn').forEach( function (elem, index) {
  elem.addEventListener('click', btnClick);
});

Alles anzeigen

Noobie_Chan · 21. März 2020

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?

Sempervivum · 21. März 2020

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.

Noobie_Chan · 23. März 2020

Jetzt kann ich weiter arbeitne, hab es endlich verstanden wie was wann. Mein problem ist das ich nicht sehe was er gerade für ein wert hat und daher kann ich nicht damit richtig umgehen! Log mir alles immer aus damit ich sehe was es gerade ist =)

DANKE!

Best Supporter, ever!

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

Mehrere btn, weniger code, tipps?

Jetzt mitmachen!

Teilen