Toggle Font-Awesome Icon funktioniert nur bedingt


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?

Der hier verwendete Code

<style> i{ width:100px; height:100px; display:block; background:blue; border:1px solid red; margin:0 auto; overflow:hidden; } .red{ background:red; } </style> <i onclick="myFunction(this)" class="fa fa-thumbs-up"> </i> <script> function myFunction(x) { x.classList.toggle("red"); } </script>

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!