NaN ausgabe ändern

[Rolf B]

Hallo Gaël,

es gibt das Number-Objekt, und darauf eine Methode isNaN, mit der Du prüfen kannst, ob ein Wert NaN ist.

Aber was willst Du eigentlich prüfen? Ob das Feld leer ist? Was machst Du, wenn jemand "Hallo" statt "42" eingibt, oder "12 Stück"? Gerade das letzte Beispiel ist böse, denn parseFloat("12 Stück") liefert ganz unschuldig die Zahl 12.

Du musst deine Eingaben validieren. Dafür ist isNaN der falsche Weg, du solltest statt dessen Folgendes tun:

Setze das required-Attribut des <input> Elements. Damit ist es ein Pflichtfeld.

Setze das pattern-Attribut des <input> Elements. Da kannst Du eine Regex eintragen, und der Browser prüft, ob die Eingabe dazu passt. Ein einfaches Pattern wäre "\s*\d+(,\d*)?\s*". Das sind: 0-n Leerstellen, 1-n Ziffern und dann optional ein Nachkommateil mit einem Komma und 0-n Ziffern. Dahinter können wieder Spaces folgen.

Definiere im CSS eine Visualisierung für ungültige Inputs. Das geht z.B. mit dem Selektor input:not(:valid). Du könntest einem ungültigen Input zum Beispiel einen roten Hintergrund geben, oder ein rotes Outline.

Prüfe im JavaScript nochmals die Gültigkeit der Eingabe. Dazu wendest Du dich an das form, dort gibt es die Methode checkValidity. Sie liefert true, wenn die Prüfbedingungen aller Eingabefelder zutreffen. Weil Du required und ein pattern gesetzt hast, liefert diese Methode nur true, wenn alle Eingabefelder ausgefüllt sind und dem Pattern entsprechen.

Das folgende Beispiel zeigt die Bausteine. Die Verdrahtung der calculate-Methode ist auf verschiedene Arten möglich, das überlasse ich dir :) Das form ist aber sinnvoll, weil Du andernfalls die Gültigkeit aller Eingabefelder einzeln prüfen musst (validity.valid Eigenschaft der input Elemente).

HTML

<form name="formu" action="#">      <!-- form ohne Action -->
   <label>Eingabe 1: <input type="text" name="input1" required pattern="\s*\d+(,\d*)?\s*"></label>
   <label>Eingabe 2: <input type="text" name="input2" required pattern="\s*\d+(,\d*)?\s*"></label>
   <label>Eingabe 3: <input type="text" name="input3" required pattern="\s*\d+(,\d*)?\s*"></label>
</form>

CSS

label { display: block;}
input:not(:valid) { background-color: #ff8888; }

Script

function calculate(event) {
   let theForm = document.forms.formu;     // für <form name="formu">

   if (!theForm.checkValidity()) {
      document.getElementById("output").innerHTML = "Nicht gültig";
      return;
   }
   
   let val1 = parseFloat(theForm.input1.value);    // Gelingt immer wegen Validity
   let val2 = parseFloat(theForm.input2.value);
   let val3 = parseFloat(theForm.input3.value);
   
   document.getElementById("output").innerHTML = val1 * val2 * val3;
};

Rolf