Kleiner JavaScript Kurs

Verzweigungen (Zahlenraten)

Wir verwenden unser Ein-, Ausgabe - Beispiel für die Programmierung des "Zahlenraten-Spiels erneut.
Der Rechner soll eine Zahl zwischen 1 und 100 ermitteln, die wir dann erraten müssen.
Ein Eingabefeld benötigen wir nicht mehr (bitte im HTML- und im JavaScript Quelltext löschen).
Dafür kommt eine weitere Schaltfläche hinzu ("Neustart"). Damit wird die Zufallszahl erzeugt. Bitte beachten:
Die Zufallszahl-Variable wird global definiert, damit sie in beiden Programmen gültig ist.
Programm 1 (function Z_Start() {} )
Wie im Beispiel "Würfel" erzeugen wir eine Zufallszahl (diesmal zwischen 1 und 100)
var Zufallszahl; function Z_Start(){ Zufallszahl=Math.random(); Zufallszahl=Math.ceil(Zufallszahl*100); var Ausgabe=document.getElementById('meinAusgabefeld'); Ausgabe.innerHTML ="Bitte Zahl raten"; }

Programm 2 (function Zahlenraten(){} )
Jetzt dürfen wir unseren Tipp eingeben (mit "OK?" quittieren) und bekommen über die If Verzweigungen einen Hinweis, ob unser Tipp zu gross, zu klein, oder richtig ist


<html> <head> <title>JavaScript Kurs; Ein- und Ausgaben</title> <script type="text/javascript"> var Zufallszahl; function Z_Start(){ Zufallszahl=Math.random(); Zufallszahl=Math.ceil(Zufallszahl*100); var Ausgabe=document.getElementById('meinAusgabefeld'); Ausgabe.innerHTML ="Bitte Zahl raten"; } function Zahlenraten(){ var Meldung; var Meldung1="zu gross"; var Meldung2="zu klein"; var Meldung3="stimmt genau ! Herzlichen Glückwunsch"; var a=document.getElementById('meinEingabefeld_a').value; var Ausgabe=document.getElementById('meinAusgabefeld'); if (a > Zufallszahl){Meldung=a + " ist " + Meldung1;} if (a < Zufallszahl){Meldung=a + " ist " + Meldung2;} if (a == Zufallszahl){Meldung=Meldung3;} Ausgabe.innerHTML = Meldung; } </script> </head> <body> <h1>JavaScript Kurs; Ein- und Ausgaben</h1> <h2>Der Rechner "überlegt" sich eine Zahl zwischen 1 und 100, die wir erraten müssen</h2> <input type="submit" value="Neustart" onclick="Z_Start();" /><br> <!-- Eingabefelder auf HTML Seite; ID=meinEingabefeld_a und ID=meinEingabefeld_b --> Mein Tipp: <input type="text" id="meinEingabefeld_a" /> <!-- Schaltfläche auf HTML Seite; onclick Ereignis startet JavaScript --> <input type="submit" value="OK?" onclick="Zahlenraten();" /> <br> <!-- Ausgabe auf HTML Seite; ID=meinAusgabefeld--> <h3 id="meinAusgabefeld"></h3> </body> </html>

Sollte das Programm nicht funktionieren, sollte man zum Test die, vom Rechner ermittelte Zufallszahl mit ausgeben (mit alert, oder am Ende vom Programm 1:

Ausgabe.innerHTML ="Bitte Zahl raten" + Zufallszahl ;

So könnte es aussehen: JS_Kurs_B06.html