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

Toggle Font-Awesome Icon funktioniert nur bedingt

StephanBo

Mitglied
HTML:
<i onclick="myFunction(this)" class="fa fa-thumbs-up"></i>

Javascript:
<script>
function myFunction(x) {
x.classList.toggle("fa-thumbs-down");
}
</script>

Obiger Code funktioniert leider nur bedingt. Klicke ich auf das Icon, verändert es sich auch, wie es soll (Daumen rauf wird zu Daumen runter).

Komischerweise kann ich die Klasse aber nicht ändern. Wenn ich z.B. im HTML-Code aus class="fa fa-thumbs-up" -> class="fa fa-thumbs-down" mache und entsprechend im javascript-code aus x.classList.toggle("fa-thumbs-down"); -> x.classList.toggle("fa-thumbs-up"); mache, geht das Togglen nicht mehr.

Wo liegt hier der Fehler?
 
Werbung:
Mit toggle kannst du Klassen an oder aus stellen. Mal so grob erklärt


Das heißt, dass du eine Klasse von Anfang an vergeben tust , und die andere dann da rein togglest.

Wenn das nicht so geht , kannst du auch mit add und remove class arbeiten .
Replace class gibt es auch noch womit es geht
 
Zuletzt bearbeitet:
Danke schon mal für die Antwort.

Die neue Klasse die getoggelt werden soll ist ja die "fa-thumbs-up " und das funktioniert auch ohne Probleme.

Aber warum kann ich kein anderes Symbol aus dem FontAwesome-Satz reintoggeln, außer "fa-thumbs-down"? Jeder FA-Satz ist ja schließlich eine definierte Klasse.
 
Werbung:
Erklären kann ich nicht gut ..

In mein Beispiel siehst du ja die blaue und rote Farbe.
Die Farben tauschst du mit den Bildern aus.
Ich denke jetzt mal das es jetzt klick macht?

Ansonsten mit add ,remove oder replace
 
Zuletzt bearbeitet:
Hat super geklappt. Vielen Dank. Wenn es jetzt noch ein Font-Awesome Blank Icon geben würde, wäre alles perfekt. Aber wie es aussieht, gibt es den nicht im FA-Set.
 
Werbung:
Zurück
Oben