if - Bedingungen abfragen

Navigation: Startseite → Javascript → Aufgaben → 07_aufgabe_if

if - Bedingungen abfragen

Auf dieser Seite lernst du, wie du Bedingungen abfragen kannst..

Wenn du Scripte schreiben willst, die auf Mausklicks oder Tastatureingaben reagieren sollen musst du verschiedene Möglichkeiten abfragen können.
Mit if ... else kannst du ein entweder/oder abfragen.

Aufgabe:

Erstelle eine HTML-Seite monate.htm
Schreibe ein Script
- das in einer Eingabebox die Frage stellt:
  "Wieviele Monate des Jahres haben 28 Tage?"
- das bei einer richtigen Antwort (12) die Meldung "Gut gemacht", bei einer falschen Antwort die richtige Lösung präsentiert.

Tipps:

Für die Frage brauchst du prompt(). Die zurückgegebene Antwort vergleichst du mit einer if ... else-Abfrage mit dem richtigen Ergebnis:

var Ergebnis=12;
Antwort=prompt("Wieviele Monate des Jahres haben 28 Tage?","");

if (Antwort==Ergebnis) 
{
    alert("Gut gemacht! ;-)");
}

else 
{
    .
}

Aufgabe:

Erstelle eine HTML-Seite getraenke.htm.
Setze ein Listenfeld mit den Werten Cola und Limo auf die Seite.
Für die Anzeige benötigst du zwei Textfelder:
Schreibe ein Script:
- das feststellt, welcher Eintrag im Listenfeld angeklickt wurde.
- jeden Mausklick in eines der Felder mitzählt ...
- ... und in die beiden Felder die Anzahl der Cola bzw. Limo hineinschreibt.

Tipps:

Du benötigst zwei Formen:

für das Listenfeld:

<form name="Getraenke" action="">
<select name="Auswahl" size="2" onChange="CheckAuswahl()">
   <option>Cola</option>
   <option>Limo</option>
</select>
</form>

für die Anzeige:

<form name="Anzeige" action="">
   <input type="text" name="Cola" rows="1" cols="10" readonly="readonly" />
   <input type="text" name="Limo" rows="1" cols="10" readonly="readonly" />
</form>

Für die Anzahl der jeweiligen Getränke brauchst du Variablen:
```
var AnzahlCola=0;
var AnzahlLimo=0;
```

onChange reagiert auf den Mausklick in einem Listenfeld.

<select name="Auswahl" size="2" onChange="CheckAuswahl()">

if ... else entscheidet, welches Getränk gewählt wurde.

function CheckAuswahl() 
{

if (document.Getraenke.Auswahl.selectedIndex==0)
{
    AnzahlCola++;
    document.Anzeige.Cola.value=AnzahlCola+" Cola" ;
    document.Getraenke.reset();
}
else
{
    .
    .
}

Du brauchst die Methode reset(), um das Listenfeld zurückzusetzen.

Die farbigen Buttons sind mit Style Sheets gestaltet:

<head>

<style type="text/css">

.ivory
{
     font-family:comic sans Ms,verdana,arial, helvetica;
     font-size:12pt;
     color:darkslategray;
     background-color:ivory;
     cursor:hand;
}

.aliceblue
{
     font-family:comic sans Ms,verdana,arial, helvetica;
     font-size:12pt;
     color:darkslategray;
     background-color:ivory;
     cursor:hand;
}
</style>

</head>

Dem Button wird das class-Attribut zugewiesen:

<input class="ivory" ... />
<input class="aliceblue" ... />

© Hartmut Waller
Datei: https://hartmut-waller.info/javascript/aufgaben/07_aufgabe_if.php
Zuletzt geändert: 28. 11. 2019 17:07