forms - Textfeld auswerten

Navigation: Startseite → Javascript → Aufgaben → 06_aufgabe_forms

forms - Textfeld auswerten

Auf dieser Seite lernst du, wie du ein Formularelement auswertest ..

Bisher hast du mit klickbaren Buttons gearbeitet.
Textfelder bieten individuelle Eingaben, die dann weiter verarbeitet werden müssen.
Jedem Formularelement kann mit Javascript ausgewertet werden.

Aufgabe:

Erstelle eine HTML-Seite rechner_mal.htm.
Füge eine Überschrift "Der Einmaleins-Rechner" ein.
Setze das Eingabefeld für die Zahl und zwei Textfelder auf die Seite.
Erstelle zwei Textbuttons und beschrifte sie mit "Rechne" und "Schließen".
Schreibe ein Script, das
- die Eingaben aus den Textfeldern liest und in eine Zahl umwandelt
- das Ergebnis der Multiplikation der beiden Zahlen anzeigt

Tipps:

Das Grundgerüst für die Form:

<form name="Rechnen" action=" . . ">
<input type="text" name="Eingabe" value="" size="10" />
</form>

Du musst den input-Elementen mit name aussagekräftige Namen geben.
```
<input type="text" name="ZahlEins" size="8" value="" />
```

Der Klick auf den Button "Rechne" startet den Rechenvorgang

<input type="button" value=" Rechne " onClick="Rechne()" />

Die Funktion Rechne() wertet den Inhalt der Textfelder aus ...

TextEins=document.rechnen.ZahlEins.value;
TextZwei=document.rechnen.ZahlZwei.value;

... und wandelt sie in natürliche Zahlen um.

ZahlEins=parseInt(TextEins);
ZahlZwei=parseInt(TextZwei);

Es wäre natürlich schön, wenn der Cursor beim Aufruf der Seite schon im ersten Textfeld stehen würde.
mit der onload-Funktion kannst du das erreichen:

<body onload="document.rechnen.ZahlEins.focus()">

Wenn die Funktion Rechne() nochmals aufgerufen wird, muss am Ende der Focus neu gesetzt werden.

document.rechnen.ZahlEins.focus();

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" ... />

Aufgabe:

Erstelle eine HTML-Seite primzahl.htm.
Füge eine Überschrift "Primzahltest" ein.

Setze das Eingabefeld für die Zahl, ein Textfeld für die Anzeige der Teiler und drei Buttons auf die Seite.

<form name="Eingabe">
   <input type="text" />
   <input type="button" value="..." Zeige" onClick="..." />
</form>

Beschrifte die Buttons mit "Primzahltest", "Schließen" und "Neue Zahl".
Schreibe ein Script, das
- die Eingabe aus dem Textfeld liest und in eine Zahl umwandelt,
- berechnet, ob die Zahl eine Primzahl ist.

Tipps:

Das Eingabefeld:

<form name="Rechnen" action="">
    <input type="text" name="Eingabe" value="" size="10" />
</form>

Das Formular sieht so aus:

<form action="" name="PrimzahlFormular">
   <input type="text" size="12" name="Eingabezahl">
   <input type="button" value="Primzahltest" onClick="PrimzahlCheck(document.PrimzahlFormular.Eingabezahl.value)" />
   <textarea name="Anzeige" rows="7" cols="10" readonly="readonly"></textarea>
</form>

Klingt schwierig, ist es aber nicht ;-)

PrimzahlCheck(document.PrimzahlFormular.Eingabezahl.value)

liest die Eingabe(value) aus dem Textfeld(document.PrimzahlFormular.Eingabezahl) und übergibt den Wert an die Funktion PrimzahlCheck.

In der Funktion PrimzahlCheck muss der Test auf mögliche Teiler nur bis zur Hälfte der Zahl laufen.
```
function PrimzahlCheck(Zahl)
{
   var Grenzzahl = Zahl / 2;
```
Die Funktion modulo kann berechnen, ob eine Zahl ohne Rest teilbar ist.

   var Text="";
    
   for(i = 2; i <= Grenzzahl; i++)
   {
      if(Zahl % i == 0)  
      {
         Text=Text+i+"\n";
      }		 
}

Jetzt bleiben noch zwei Dinge zu tun:
- die Primzahlen werden im Textfeld angezeigt
- eine Funktion neueZahl leert die Textfelder und setzt den Focus wieder in das Eingabefeld

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