Kleiner JavaScript Kurs

Grafik (Würfel 2 und Würfel 2a)

Auf unserer HTML Seite befindet sich unter der Schaltfläche jetzt eine Grafik (das Bild w0.gif) mit der id "Bildwuerfel":
<input type="submit" value="Würfeln" onclick="Wuerfel_2();"> <br> <br> <img src="w0.gif" id="Bildwuerfel" alt="" border="0" width="33" height="31">

Um einen grafischen Würfel zu bauen, ermitteln wir zunächst eine Zufallszahl zwischen 1 und 6 (wie im Beispiel Würfel_1).
Dann tauschen wir das Bild gegen das Bild mit dem Würfelergebnis aus.
Im Array "Bild[]" haben wir die Bilder "w0.gif","w1.gif",....,"w6.gif" für die 6 verschiedenen Würfel-Ergebnisse gespeichert
var Bild=["w0.gif", "w1.gif","w2.gif","w3.gif","w4.gif","w5.gif","w6.gif"];
Um das Bild mit JavaScript anzusprechen definieren wir die Variable "Ausgabebild" und tauschen das Bild dann mit "Ausgabebild.src=" aus
var Ausgabebild=document.getElementById('Bildwuerfel'); Ausgabebild.src=Bild[Zufallszahl];

So könnte es aussehen: JS_Kurs_B09.html


Hier die HTML-Seite mit dem kompletten Programm
(zur leichteren Fehlereingrenzung wird das Würfelergebnis zusätzlich ganz klein unter dem Bild als Zahl ausgegeben.


<html> <head> <title>JavaScript Kurs; Arrays (Würfel_2)</title> <script type="text/javascript"> function Wuerfel_2(){ var Zufallszahl; var Ausgabe=document.getElementById('meinAusgabefeld'); var Ausgabebild=document.getElementById('Bildwuerfel'); Zufallszahl=Math.random(); Zufallszahl=Math.ceil(Zufallszahl*6); Ausgabe.innerHTML = Zufallszahl; var Bild=["w0.gif", "w1.gif","w2.gif","w3.gif","w4.gif","w5.gif","w6.gif"]; Ausgabebild.src=Bild[Zufallszahl]; } </script> </head> <body> <h1>JavaScript Kurs; Arrays (Würfel_2)</h1> <h2></h2> <!-- Schaltfläche auf HTML Seite; onclick Ereignis startet JavaScript --> <input type="submit" value="Würfeln" onclick="Wuerfel_2();"> <br> <br> <img src="w0.gif" id="Bildwuerfel" alt="" border="0" width="33" height="31"> <font color="#0000FF"><h6 id="meinAusgabefeld"></h6></font> </body> </html>

Mit diesen Grundlagen lässt sich das Würfelspiel leicht erweitern (z.B. mit 5 Würfeln für ein Kniffel-Spiel, o.ä.)


So könnte es aussehen: JS_Kurs_B09a.html