Frage von MinecrafterPG, 37

Wie kann ich die Grafiken per Javascript ändern?

Hi Leute,

ich hab hier ein mega einfaches Script geschrieben:

   <input type="image" src="img/stargr.png" onclick="aone()">
    <input type="image" src="img/stargr.png" onclick="atwo()">
    <input type="image" src="img/stargr.png" onclick="athree()">
    <input type="image" src="img/stargr.png" onclick="afour()">
    <input type="image" src="img/stargr.png" onclick="afive()">

    <script>
    function aone() {
        alert("Ein Stern");
    }

    function atwo() {
        alert("Zwei Sterne");
    }

    function athree() {
        alert("Drei Sterne");
    }

    function afour() {
        alert("Vier Sterne");
    }

    function afive() {
        alert("Fünf Sterne");
    }
    </script>

Das Bild stargr.png ist einfach ein grauer Stern :p

Meine Frage: Wie bekomme ich das jetzt hin, dass jenachdem welchen Stern man anklickt, dieser und die Sterne dahinter geändert werden (also zum farbigen (star.png)) ?

Antwort
von Sarkophator, 20

Für das was du machen willst, brauchst du keine grafischen Submit-Buttons, die brauchst du eigentlich nur wenn du sie in Formularen verwendest. (Dann wäre aber eine Javascript-Implementation fraglich)

Grundsätzlich funktioniert das Click-Event auf sogut wie allen Elementen, das heißt du kannst es auch ohne Probleme an ein img-Element (oder an ein div etc.) binden. Außerdem solltest du den img-Elementen dann auch eine Klasse geben, sodass du von JavaScript aus auf diese Elemente-Zugreifen kannst.

Im Javascript holst du nun all deine Stern-Bildelemente (jetzt beispielshaft mit der Klasse "star") über document.getElementsByClassName:

document.getElementsByClassName("star");

und iterierst dann durch die Collection durch und bindest den einzelnen Elementen am besten über addEventListener ein Klick-Event an.

In diesem Klickevent gehst du nun jedes Mal nochmal die ganze Collection durch. Da die Collection geordnet ist, kannst du einfach solange die Image-Sources umändern, bis das aktuell geklickte Element (dass du über this erhälst) auftaucht. Alle Elemente die danach kommen, setzt du dann wieder auf das ursprüngliche Bild zurück.

Hier mal ein kleines Beispiel mit div-Elementen:

https://jsfiddle.net/bcfemh13/

Mit jQuery wäre das ganze noch etwas kürzer und an sich lesbarer:

$(".star").click(function() {
$(this).prevAll().andSelf().addClass("active");
$(this).nextAll().removeClass("active");
})

Dort müsstest du dann natürlich mittels .attr("src", "path/to/image.png") das Bild umändern.

Kommentar von MinecrafterPG ,

Danke für deine Hilfe!!!

Kommentar von MinecrafterPG ,

Wie kann ich bei Javascript den Wert der aktivierten Sterne abrufen?

Kommentar von Sarkophator ,

Hm, kommt drauf an was du mit "Wert" meinst? Wenn du die Anzahl der aktivierten Sterne meinst, dann geht das ganz einfach über:

document.getElementsByClassName("star active").length;

bzw. in jQuery:

$(".star.active").length;
Kommentar von MinecrafterPG ,

Ja, das meine ich! Ich habs jetzt einfach mal so gemacht:

function show()  {

var active = document.getElementsByClassName("star active").length;
...
}

Danke!!!

Keine passende Antwort gefunden?

Fragen Sie die Community

Weitere Fragen mit Antworten