[GELOEST] Mehrere Elemente var btn = document.querySelector anwählen

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Matthias

Mitglied
15 April 2017
98
0
6
31
Hallo,

in meinem Footer habe ich folgenden Javascript Code

Javascript:
<script>
var btn = document.querySelector('#element-h8zCh7GK .btn');
              
 
if (btn) {
  btn.addEventListener('click', function() {
    
  fbq('track', 'Lead');

  });
}
</script>
Der Code wählt ein Seiten-Element aus. Dieses Element ist ein Button. Klickt jemand darauf, dann wird der Besucher getrackt.

Jetzt habe ich aber insgesamt 4 Button auf der Seite. Mein erster Gedanke war, den Code so umzuschreiben:

Javascript:
<script>
var btn = document.querySelector('#element-h8zCh7GK .btn');
               document.querySelector('#element-Ho8EG7eZ .btn');
              document.querySelector('#element-NyHN59S3 .btn');
              document.querySelector('#element-AhCJpKYR .btn');
              
 
if (btn) {
  btn.addEventListener('click', function() {
    
  fbq('track', 'Lead');

  });
}
</script>
Leider funktioniert damit nur das Tracking für den ersten Button.

Wie kann ich Javascript so umschreiben, dass alle Button-Element erfasst werden?

Danke
 

Matthias

Mitglied
15 April 2017
98
0
6
31
Ich habe mir die Links angeschaut, aber meine Javascript Kenntnisse reichen bei weitem nicht aus, um das richtig zu schreiben.

Bisher habe ich das hier probiert:


Code:
<script>
var btn = document.querySelectorAll("#element-h8zCh7GK .btn,#element-Ho8EG7eZ .btn,#element-NyHN59S3 .btn,#element-AhCJpKYR .btn");
              
 
if (btn) {
  btn.addEventListener('click', function() {
    
  fbq('track', 'Lead');

  });
}
</script>
Das funktioniert aber leider nicht.

Es gehlt auch das foreach, da mir nicht klar ist, wie ich das dort einsetzen soll.

Kann mir das jemand schnell schreiben? Das wäre super.

Danke
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.913
370
83
67
Dies sollte funktionieren (ungetestet):
Code:
<script>
const btns = document.querySelectorAll("#element-h8zCh7GK.btn,#element-Ho8EG7eZ.btn,#element-NyHN59S3.btn,#element-AhCJpKYR.btn");
btns.forEach(thebtn, idx) {
    thebtn.addEventListener('click', () => {
        fbq('track', 'Lead');
    });
}
</script>
 

Matthias

Mitglied
15 April 2017
98
0
6
31
Danke,

ich habe es eingebaut.


Hat aber leider nicht funktioniert.

Hat es mit "const btns" zu tun? Ursprünglich mit nur einer Variable hieß es noch var btn.

Ich wüsste jetzt nicht welche zusätzlichen Infos ich liefern könnte. Einen Link zur Webseite veröffentliche ich ungerne in einem Forum.
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.913
370
83
67
Möglicher Weise ist mir da ein Fehler unterlaufen, weil ich das HTML nicht kenne: Das Leezeichen zwischen ID und Klasse ist wahrscheinlich doch richtig. Versuche es so:
Code:
const btns = document.querySelectorAll("#element-h8zCh7GK .btn,#element-Ho8EG7eZ .btn,#element-NyHN59S3 .btn,#element-AhCJpKYR .btn");
 

Tronjer

Moderator
Teammitglied
Moderator
8 Oktober 2010
5.220
480
83
Berlin
Wieso muss ein Selector so tief ausdifferenziert werden?

Abgesehen davon ist das Anhängen von Eventlistenern per Schleife bad practice.
 

Aaron3219

Senior HTML'ler
6 Oktober 2015
1.130
232
63
19
Wieso denn das? Und was ist die Alternative?
Du setzt einen event listener für den document.body Und fragst dann das event target ab. Es ist deutlich performanter. Du sparst z.B auch Code, weil die ganzen Schleifen wegfallen. Ist aber nicht immer so.

Nennt man im übrigen Event Delegation.
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.913
370
83
67
OK, das Verfahren ist mir bekannt. Ich sehe da den Nutzen vor allem dann, wenn die Elemente "irgend wann" dynamisch erzeugt werden. Kennt man die Elemente und sie sind statisch im HTML definiert, ist es nur unnötig undurchsichtig. Und die Komplexität verlagert sich nur in den Listener, wenn man das Target auswertet.
 

Tronjer

Moderator
Teammitglied
Moderator
8 Oktober 2010
5.220
480
83
Berlin
Wobei man heutzutage JavaScript Frontend-Frameworks einsetzt und dabei Click-Events wieder direkt ins HTML schreibt.
 
  • Like
Reaktionen: Aaron3219

Matthias

Mitglied
15 April 2017
98
0
6
31
Danke für die Hilfestellung.

Das Problem ist gelöst.

Folgender Code hat zum Ziel geführt:

Javascript:
<script>
var btns = document.querySelectorAll('#element-vDSmTJuq .btn, #element-vDSmTJuq2 .btn, #element-vDSmTJuq3 .btn');

for (var i = 0; i < btns.length; i++) {
var btn = btns[i];

btn.addEventListener('click', function() {

fbq('track', 'Lead');

});

}
</script>
Leider sehe ich nicht, wie ich das Thema als gelöst markieren kann.
 

Aaron3219

Senior HTML'ler
6 Oktober 2015
1.130
232
63
19
Ich würde mir die anderen Beiträge anschauen und Event Delegation verwenden. Dein Weg ist einfach uneffizient und bad practice.