Java Bild mittels Click rotieren vorgegebene Funktion

[Dudeldumm]

Hallo liebe Community,

ich hoffe ihr trotz der Sommerhitze und habt einen kurzen Moment mir zu helfen.

EDIT JAVA SCRIPT nicht Java sorry

Ich will auf meiner Homepage ein Bild rotieren lassen wenn man es anklickt. Die Auswahl besteht aus 4 Bildern die ich erstellt habe.
Bereits bei betreten der Homepage wird ein Bild angezeigt.

Folgen Funktion habe ich vorgegeben bekommen.

<script>
            function randomImage() {
               
               
                return Math.floor(Math.random() * 4) + 1;
            }
<       </script>

Ich habe bereits folgendes in HTML angelegt aber komme auf keinen grünen Zweig:
<img src="Images/JohnWick1.png" , id="Bild1">

<script>
document.getElementById("Bild1").onclick = function(){
document.getElementById("Bild1").src = "Images/JohnWick2.png"
return Math.floor(Math.random() * 4) + 1 ;
}
</script>

[/CODE]
Ich würde mich riesig über Hilfe freuen LG

 

[majusss]

Was hat das ganze mit Java zu tun?

 

[Amaoto]

Es ist JavaScript, nicht Java. Beide unterscheiden aber zwischen Groß- und Kleinschreibung (z.B. ist randomimage() nicht gleich randomImage()).
Ansonsten möchtest du vermutlich etwas Richtung document.getElementById("grafik").src="..."; haben. Deine hinzugefügte Zeile ergibt so aber keinen Sinn. Was genau sollte sie machen?

 

[Dudeldumm]

Es ist JavaScript, nicht Java. Beide unterscheiden aber zwischen Groß- und Kleinschreibung (z.B. ist randomimage() nicht gleich randomImage()).
Ansonsten möchtest du vermutlich etwas Richtung document.getElementById("grafik").src="..."; haben. Deine hinzugefügte Zeile ergibt so aber keinen Sinn. Was genau sollte sie machen?

Stimmt entschuldige etwas schlampig ausgearbeitet.

Ich bin einen Schritt weiter (denke ich)

<img src="Images/JohnWick1.png" , id="Bild1">
    
<script>
document.getElementById("Bild1").onclick = function(){
document.getElementById("Bild1").src = "Images/JohnWick2.png"
    return Math.floor(Math.random() * 4) + 1 ;
}
</script>

Jetzt wechselt immerhin Bild 1 zu Bild 2. Ich habe allerdings noch 2 weitere Bilder.

Diese heißen JohnWick3.png und JohnWick4.png

 

[abcddcba]

Ich verstehe nicht was du machst, natuerlich wechselt es immer zu Bild 2, du hast es doch hard codiert im Code...siehst du das nicht selbst? Du aenderst fix das Bild auf "Images/JohnWick2.png" und danach gibst du voellig nutzlos noch eine Zufallszahl zurueck.

Was haelt dich davon ab den Dateinamen mit Hilfe der Zufallszahl zu generieren und als Source vom Bild zu setzen? Denk doch mal logisch und sieh dir den Ablauf der Methode an, lerne strukturiert zu denken, zu lesen und zu schreiben. Erst Zahl generieren, dann Bild aendern, nicht andersrum.
Verstehst du worauf ich hinaus will?

 

[Amaoto]

Wenn du die Funktion entfernt hast, ist ein return-Wert natürlich nicht notwendig.
Erzeuge die Zufallszahl (mit dem Ausdruck, der ja schon da ist), und baue sie in den String hinein: "Images/JohnWick" + randn + ".png"

Noch besser wäre eine Fallunterscheidung, z.B. mit switch.

 

[Dudeldumm]

Vielen Dank für die Hilfe und "teilweise" hilfreichen Tipps
Ich habe es gelöst:

        <script>
            function randomImage() {
                return Math.floor(Math.random() * 4) + 1;
            }
            document.getElementById("Bild1").onclick = function(){
                const randNum =  randomImage();
                document.getElementById("Bild1").src = [ICODE]Images/JohnWick${randNum}.png[/ICODE]
            }
        </script>

Ergänzung (27. Juli 2019)

Ich verstehe nicht was du machst, natuerlich wechselt es immer zu Bild 2, du hast es doch hard codiert im Code...siehst du das nicht selbst? Du aenderst fix das Bild auf "Images/JohnWick2.png" und danach gibst du voellig nutzlos noch eine Zufallszahl zurueck.

Was haelt dich davon ab den Dateinamen mit Hilfe der Zufallszahl zu generieren und als Source vom Bild zu setzen? Denk doch mal logisch und sieh dir den Ablauf der Methode an, lerne strukturiert zu denken, zu lesen und zu schreiben. Erst Zahl generieren, dann Bild aendern, nicht andersrum.
Verstehst du worauf ich hinaus will?

Du hast vollkommen recht vielen Dank