Formular mit Javascript läuft nicht mehr auf aktuelle Browser/server

[Rolf B]

Hallo akuep,

die geschweiften Klammern fallen mir auch auf. Es ist auch immer hilfreich, seine Programmzeilen entsprechend der Programmlogik einzurücken. Wegen der Klammern vergleiche gerne auch diagr1.js mit diagr5.js, da wurde es richtig gemacht (hihi, wenn Du schon eure URL hinterlässt, dann guck ich auch ins Original).

Das dürfte schonmal einiges verbessern.

Sodann: Es ist ungeschickt, eine Logik dieser Art aufzubauen.

if (A) {
  tu was
}
if (NOT A AND B) {
  tu was anderes
}
if (NOT A AND NOT B AND C) {
  tu was drittes
}

Die Formulierung von "NOT A" kann umständlich sein, und vor allem muss man bei Programmänderungen alle Stellen anpassen, wo das auftaucht.

Gestatten, mein Name ist ELSE (englisch für „sonst“):

if (A) {
   tu was
}
else if (B) {
   tu was anderes 
}
else if (C) {
   tu was drittes
}

In deinem Fall ist es sogar so, dass Du nach einer gescheiterten Plausibilitätsprüfung auch gleich die Funktion verlassen könntest. Die Doktrin, dass eine Funktion nur einen Ausgang haben darf, hat schon viele Programmierer in die Migräne getrieben. Bei gescheiterten Plausis steigt man aus und baut auch keine ELSE-Gebirge auf, wie es manche Leute gerne tun. Vor allem dann nicht, wenn die Funktion gar keine Funktion ist, sondern eine Prozedur 😉.

if (Fehlerbedingung 1) {
   Meldung 1
   return;
}
if (Fehlerbedingung 2) {
   Meldung 2
   return;
}

Sodann solltest Du die Reihenfolge verändern. Initialisiere zuerst die Meldungsstrings. Dann hol Dir Die Eingabewerte, mach eine Zahl draus und prüfe auf NaN. Im Fehlerfall verlasse die Funktion. Es ist UNSINN, das erst ganz zum Schluss zu tun. Wenn Du im Fehlerfall unbedingt "Keine Kategorie" in form.ausgabe stehen haben willst, dann mach das einmal vor der ersten Prüfung, ich würde aber eher "Falsche Eingabe" hineinschreiben. Und Du solltest verlangen, dass Eingabewerte positiv sind.

const ps = parseFloat(form.eingabe1.value);
const v = parseFloat(form.eingabe2.value);
if (isNaN(ps) || isNaN(v) || ps <= 0 || v <= 0) {
   alert(meld3);
   return;
}

const? Ja, const. Für Variablen, die lediglich zugewiesen und dann nicht mehr verändert werden, verwende const, nicht let.

Den Fall, dass ps <= 0.5 ist, solltest Du als einen Logikblock behandeln und danach die Funktion verlassen. Da dein Code wegen der fehlenden Blockklammern an Durchfall leidet, weiß ich nicht, ob Y oder Z die richtige Kategorieausgabe ist.

if (ps <= 0.5) {
   alert(meld2);
   form.ausgabe.value = ???   /* Y oder Z */
   return;
}

Für den Rest solltest Du Dich druckmäßig von oben herantasten. Erst mal ps > 1000 oder psv > 1000 für Kategorie IV. Hier hast Du ggf. eine Logiklücke: ps=1001 und v=0.05 gibt Meldung 4 aus und setzt freie Modulauswahl, aber am Schluss überschreibst Du das wieder mit Kategorie IV. Was ist richtig?

Die Abfrage auf form.option.checked kannst Du übrigens in einen Inline-If umwandeln - dazu dient der Operator ?: - die Verwendung ist Bedingung ? wert1 : wert2. Ist die Bedingung erfüllt, kommt Wert 1 raus. Sonst Wert 2. Damit kannst Du beispielsweise sowas schreiben:

if (psv <= 50) {
   form.ausgabe.value = form.option.checked ? III : I;
}

Ist diese Logik (ab Zeile 21) vielleicht das, was Du brauchst? Für ps <= 0.5 und für v <= 0.1 sollte vorher eine Meldung und ein return gekommen sein, das frage ich deshalb nicht mehr ab. Und für die oben genannte Logiklücke nehme ich mal an, dass für ps>1000 immer Kategorie IV gilt. Ja, ok, es ist ein else-Gebirge geworden... 😉

if (ps > 1000 || psv > 1000) {     // Kat. IV ist vom Volumen unabhängig
   form.ausgabe.value = IV;
}
else if (ps > 200) {
   if (v <= 0.1) {                 // Kleinstbehälter
      alert(meld4);
      form.ausgabe.value = Z;
   } 
   else if (v <= 1) {              // Kleinbehälter
      form.ausgabe.value = III;
   }
   else {
      form.ausgabe.value = form.option.checked ? III : II;
   }
}
else if (v <= 1) {                 // Kleinbehälter bis 200 bar
   alert(meld1);
   form.ausgabe.value = Y;
}
else if (ps > 50) {                // Ab hier Normalbehälter bis 200 bar
   form.ausgabe.value = form.option.checked ? III : II;
}
else if (ps > 25) {
   form.ausgabe.value = form.option.checked ? III : I;
}
else {
   alert(meld1);
   form.ausgabe.value = Y;
}

Man könnte da noch eine Menge mehr tun, insbesondere was automatisierte Tests angeht, aber ich nehme an, du hast jetzt schon genug zu knabbern.

Auf die Frame-Wüste geh ich lieber nicht ein - die Seite ist alt. Heute macht man keine Frames mehr, das geht anders.

Auf das Tabellenlayout gehe ich lieber auch nicht ein. Schau Dir bei uns im Wiki das Thema Grid-Layout an, das wäre hier angemessen.

Wichtig ist aber, dass deine Eingabefelder Labels bekommen. D.h. in Spalte 1, wo die Beschriftung als p Element steht, müsste beispielsweise stehen:
<label for="ID_eingabe1_B6C07F1C">max. zul. Druck</label>
Das for-Attribut setzt Label und Input in Bezug und ein Screenreader weiß dann, was wozu gehört. Ich bezweifle allerdings, dass ein nichtsehender Mensch mit der Seite wirklich klarkommt. Dafür ist zu viel drauf, und die Framesets dürften auch unzugänglich sein.

Rolf