Real time Rechner (AJAX/JS)
bearbeitet von
@@MaxiG
> ~~~html
> <html>
> ~~~
Hier fehlt die Angabe der Sprache: `<html lang="de">`{:.language-html}.
Im `head` sollten noch die Angabe der verwendeten Zeichencodierung und die Viewportangabe stehen. ☞ [Grundgerüst](https://wiki.selfhtml.org/wiki/HTML/Tutorials/HTML5/Grundger%C3%BCst)
> ~~~html
> <script type="text/javascript">
> <!--
> ~~~
`type="text/javascript"` kannst du weglassen.
`<!--`{:.language-html} solltest du weglassen! (Zumal bei dir auch das Ende des Kommentars fehlt.)
> ~~~js
> var wert1 = document.getElementById('feld1').value;
> var wert2 = document.getElementById('feld2').value;
> var erg1 = wert1 * wert2;
> ~~~
Was haben deine Debug-Versuche ergeben? Du hast keine unternommen?
Lass dir mal die Werte ausgeben, z.B. mit `console.log(wert1, wert2)`{:.language-js}.
Wenn du dann noch nicht siehst, was da los ist, deren Typen: `console.log(typeof wert1, typeof wert2)`{:.language-js}.
Was kommt also als `erg1`{:.language-js} raus?
> ~~~html
> <input type='text' id='feld1' onKeyUp='calculate()'> x <input type='text' id='feld2' onKeyUp='calculate()' value='2'> = <span id='erg1'></span>
> ~~~
Die Eingabefelder sollten vom Typ `"number"` sein. (Dann kannst du auch Minimal- und Maximalwerte dafür angeben.)
Die Eingabefelder müssen eine [Beschriftung (`label`)](https://wiki.selfhtml.org/wiki/HTML/Formulare/label) haben! Ansonsten wissen bspw. blinde Nutzer nicht, was sie eingeben müssen. Ein einigen Spezialfällen (wovon das einer sein könnte) kann man das Label [visuell verstecken](https://a11yproject.com/posts/how-to-hide-content/).
Das Ausgabefeld wäre gern ein `output`-Element (auch mit Label).
Und das Malzeichen sieht so aus: × (nicht ein x für ein × vormachen).
LLAP 🖖
PS: Mit AJAX hat das alles nichts zu tun.
--
*„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“* —Kurt Weidemann