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

[akuep]

Ich will ein 10 Jahre altes Formular mit Javascript auf aktuelle Browser/Server -Anforderungen bringen. Das unten stehende läuft so nicht. Kann mir einer Hilfestellungen geben?

Danke

<script>
function categorie (formdia1) {
		let ps = formdia1.eingabe1.value;
		let v = formdia1.eingabe2.value;
		let psv = formdia1.eingabe1.value*formdia1.eingabe2.value;
		let Y = "Keine Kategorie";
		let Z = "Keine Kat.; Freie Modulauswahl!";
		let I = "Kategorie I";
		let II = "Kategorie II";
		let III = "Kategorie III";
		let IV = "Kategorie IV";
		let meld1 = "Das Druckgeraet ist ... werden.";
		let meld2 = "Das Druckgeraet liegt ... Druckgeraeterichtlinie!";
		let meld3 = "Bitte tragen Sie ... Komma).";
		let meld4 = "Das Druckgeraet muss ... A-05";
		
		if (ps <= 0.5)
		alert(meld2);
		
		if (ps > 200 && v > 0.0001 && v <= 0.1)
		alert(meld4);
		formdia1.ausgabe.value = Z;
		
		if ((ps > 0.5  && ps <= 200 && v > 0.0001 && v <= 1) || (ps > 0.5 && v > 1 &&  psv <= 25))
		alert(meld1);
		formdia1.ausgabe.value = Y;


		if (ps > 0.5 && v > 1 && psv > 25 && psv <= 50)
		formdia1.ausgabe.value = I;
		
		if (ps > 0.5 && v > 1 && psv > 25 && psv <= 50 && formdia1.option.checked)
		formdia1.ausgabe.value = III;
		
		if (ps > 0.5 && v > 1 && psv > 50 && psv <= 200 )
		formdia1.ausgabe.value = II;
		
		if (ps > 0.5 && v > 1 && psv > 50 && psv <= 200 && formdia1.option.checked)
		formdia1.ausgabe.value = III;
		
		
		if ((ps > 0.5 && v > 1 && psv > 200 && psv <= 1000) || (v <= 1 && v > 0.1 && ps > 200 && ps <= 1000))
		formdia1.ausgabe.value = III;
		
		if ((ps > 0.5 && ps <= 1000 && psv > 1000) || ps > 1000)
		formdia1.ausgabe.value = IV;
		
		if (ps=="" || v=="" || isNaN(psv)==true)
		alert(meld3);	
	}
</script>	
	<div id="rahmen" align="center">
				<table border="0" cellpadding="3" cellspacing="2" width="">
					<tr>
						<td colspan="2" bgcolor="#b0c4de">
						<p class="normaltext-9px-zentr"><br>
							<b><span class="uberschrift-18px-l-rot">Kategorie-Bestimmung</span></b></p>
						<div class="normaltext-9px-zentr">
							<p><b class="normaltext-9px-zentr">Druckger&auml;terichtlinie 2014/68/EU <br>
									Anhang II</b></p>
						</div>
					</td>
					</tr>
					<tr>
						<td width="50%" bgcolor="#dcdcdc">
							<p class="normaltext-9px-rechts">Druckger&auml;t:<br>
							</p>
							<p class="normaltext-9px-rechts">Fluid:</p>
							<p class="normaltext-9px-rechts">Fluidgruppe:</p>
						</td>
						<td width="48%" bgcolor="#dcdcdc">
					    <p class="normaltext-9px-links"><b> Beh&auml;lter</b></p>
							<p class="normaltext-9px-links"><b>Gas</b></p>
							<p class="normaltext-9px-links"><b>1 </b>(gef&auml;hrlich)</p>
						</td>
					</tr>
				<tr>
						<td colspan="2" bgcolor="#b0c4de">
						<div class="normaltext-9px-zentr">
							<p><br>
								Beh&auml;lter, die f&uuml;r ein instabiles Gas z. B. Acetylen
								bestimmt sind, sind mind. in die Kategorie III einzustufen.</p>
						</div>
					</td>
					</tr>
				<tr bgcolor="#b0c4de">
					<td colspan="2">
						<form name="formdia1" action="">
							<table border="0" cellpadding="4" cellspacing="2" width="440">
								<tr bgcolor="#d3d3d3">
									<td width="100">
										<p class="normaltext-9px-links"><b>max. zul. Druck</b></p>
									</td>
									<td width="17">
										<p class="normaltext-9px-links"> PS</p>
									</td>
									<td colspan="2">
										<p class="normaltext-9px-links"><input type="text" name="eingabe1" size="5" value="" id="eingabe1">[bar]&nbsp;</p>
									</td>
								</tr>
								<tr bgcolor="#d3d3d3">
									<td width="100">
										<p class="normaltext-9px-links"><b>Volumen<br>
											</b></p>
									</td>
									<td width="17">
										<p class="normaltext-9px-zentr">V</p>
									</td>
									<td width="120">
										<p class="normaltext-9px-links"><input type="text" name="eingabe2" size="5"> [ l ]&nbsp;</p>
									</td>
									<td><input type="reset" value="RESET"></td>
								</tr>
								<tr bgcolor="#d3d3d3">
									<td width="100">&nbsp;</td>
									<td width="17"><input type="checkbox" value="eins" name="option"></td>
									<td colspan="2">
										<p class="normaltext-9px-links">Fluid ist ein instabiles Gas</p>
									</td>
								</tr>
								<tr>
									<td colspan="4">&nbsp;</td>
								</tr>
								<tr bgcolor="#d3d3d3">
									<td width="100">
										<p class="normaltext-9px-links"><b>Ergebnis:</b></p>
									</td>
									<td colspan="2" bgcolor="red" width="156"><input type="text" name="ausgabe" size="24" readonly></td>
									<td><input type="button" size="24" name="berechnen" onClick="categorie (this.form)" value="Kategorie ermitteln"></td>
								</tr>
								<tr>
									<td colspan="4">
										<p class="normaltext-9px-links"><br>
											&copy; www.druckgeraete-online.de</p>
									</td>
								</tr>
							</table>
						</form>
					</td>
				</tr>
			</table>
			</div>
			<div id="Ebene1" class="text-rahm-blau">
			<p class="uberschrift-14px-l-blau">Besonderer Hinweis</p>
			<p><span class="normaltext-9px-links">Wenn das Volumen ... anzuwenden:</span></p>
			<p class="normaltext-9px-block">Die Druckger&auml;te ... CE-Kennzeichnung tragen.</p>
		</div>

[JürgenB]

Hallo,

beim ersten Blick ist mir aufgefallen:

		
		if (ps > 200 && v > 0.0001 && v <= 0.1)
		alert(meld4);
		formdia1.ausgabe.value = Z;
		
		if ((ps > 0.5  && ps <= 200 && v > 0.0001 && v <= 1) || (ps > 0.5 && v > 1 &&  psv <= 25))
		alert(meld1);
		formdia1.ausgabe.value = Y;

hier fehlen wohl die {}:

		
		if (ps > 200 && v > 0.0001 && v <= 0.1) {
  	  		alert(meld4);
			formdia1.ausgabe.value = Z;
		}
		
		if ((ps > 0.5  && ps <= 200 && v > 0.0001 && v <= 1) || (ps > 0.5 && v > 1 &&  psv <= 25)) {
			alert(meld1);
			formdia1.ausgabe.value = Y;
		}

Sonst steht in formdia1.ausgabe.value immer Y.

Wenn es das nicht war, wäre eine über

Das unten stehende läuft so nicht.

hinausgehende Fehlerbeschreibung schon hilfreich für die Helfer.

Gruß
Jürgen

[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

[akuep]

Hallo Rolf,

du hast dir aber viel Mühe gegeben, vielen, vielen, vielen Dank.

Das alte Script läuft nach über 10 Jahren immer noch (vorausgesetzt ist aber eine noch ältere PHPVersion (V7.2). Ich habe es jetzt endlich einmal angepackt. Seitdem habe ich auch nichts mehr mit JavaScript gemacht.

Mit den geschweiften Klammern habe ich schon erledigt.

Das andere werde ich noch verarbeiten.

Aber meine Formular läuft jetzt. Der Grund war eigentlich, ich habe es auf einer provisorischen Seite (plesk beim Provider getestet). Das war wohl der Grund.

Jetzt habe ich die Seite unter https://ped-online.com/ped-category-calculator/ veröffentlicht (ist wohl noch nicht endgültig).

Ich werde noch weitere 8 Diagramme so ähnlich erstellen. Aber dafür werde ich an dieser "Masterseite" erst noch arbeiten müssen.

Nochmals vielen Dank

[Rolf B]

Hallo akuep,

ei verflixt, das ist ein Volltreffer aus dem Nerd-Sniper. 3 Punkte für Dich 😉

Warum? Diese Aufgabe schreit nach einer SVG Lösung, in der man Druck und Volumen per Schieber einstellen kann und den Punkt im Kategorienfeld angezeigt bekommt. Mann mann mann, eieieiei…

Rolf

[akuep]

Hallo akuep,

ei verflixt, das ist ein Volltreffer aus dem Nerd-Sniper. 3 Punkte für Dich 😉

Warum? Diese Aufgabe schreit nach einer SVG Lösung, in der man Druck und Volumen per Schieber einstellen kann und den Punkt im Kategorienfeld angezeigt bekommt. Mann mann mann, eieieiei…

Rolf

Mit dem Nerd-Sniper verstehe ich nicht ganz.

Was das Skript betrifft, habe ich es grundsätzlich so belassen (ich gebe dir recht, dass das bestimmt eleganter geht z. B. mit "else". Aber ich habe nicht den so den Ehrgeiz das optimal programmtechnisch zu machen, ich muss das (auch nach Jahren) immer für mich nachvollziehbar machen können. Aber es hat ja bisher jahrelang funktioniert (und ich war stolz das weltweiter Pionier im Internet veröffentlicht zu haben). Trotzdem nochmals vielen Dank für deine Ratschläge.

Ich habe noch einmal daran gearbeitet und mit Grid-layout gearbeitet (war ganz schön mühsam bis man das einmal einigermaßen verstanden hat (ich arbeite sonst mit Elementor, da braucht man das nicht). Bis auf das endgültige layout habe ich das Formular neu erstellt, aber es funktioniert noch nicht (keine Reaktion beim Button auch nicht der Reset-Button funktioniert nicht. Es es dir keine so großen Umstände macht, würde ich mich freuen , wenn du noch einmal darüber schaust, ob du Fehler erkennst.

Hier das Script: (sorry ich habe gerade gesehen, dass in der Vorschau etwas durcheinander ist)

<html>
<script>
function categorie () {
        'use strict';
		const ps = parseFloat(formdia1.eingabe1.value);
        const v = parseFloat(formdia1.eingabe2.value);
		let psv = ps*v;
		let Y = "No Category";
		let Z = "No Cat.; Free module selection!";
		let I = "Catategory I";
		let II = "Category II";
		let III = "Category III";
		let IV = "Category IV";
		let meld1 = "Das Druckgeraet ist aufgrund der eingegebenen Betriebsbedingungen (Druck, Volumen)  keiner Kategorie zuzuordnen und braucht keinem Konformitaetsbewertungsverfahren unterzogen werden. Folglich darf das Druckgeraet auch nicht mit einem CE-Kennzeichen versehen sein.  Das Druckgeraet muss jedoch in Uebereinstimmung mit der geltenden Ingenieurpraxis ausgelegt und hergestellt werden.";
		let meld2 = "Das Druckgeraet liegt aufgrund des geringen Gefahrenpotentials (Druck PS ≤ 0,5 bar) nicht im Geltungsbereich der Druckgeraeterichtlinie!";
		let meld3 = "Bitte tragen Sie in den beiden Feldern fuer Druck und Volumen Zahlenwerte ein (Schreibweise: Punkt statt Komma).";
		let meld4 = "Das Druckgeraet muss die grundlegenden Anforderungen des Anhang I erfuellen und eine CE-Kennzeichnung tragen. Fuer das Konformitaetsbewertungsverfahren besteht die freie Modulauswahl. Siehe hierzu die Leitlinie A-05";
		
		if (ps <= 0.5){
		alert(meld2);}
		
		if (ps > 200 && v > 0.0001 && v <= 0.1){
		alert(meld4);
		formdia1.ausgabe.value = Z;}
		
		if ((ps > 0.5  && ps <= 200 && v > 0.0001 && v <= 1) || (ps > 0.5 && v > 1 &&  psv <= 25)){
		alert(meld1);
		formdia1.ausgabe.value = Y;}

		if (ps > 0.5 && v > 1 && psv > 25 && psv <= 50){
		formdia1.ausgabe.value = I;}
		
		if (ps > 0.5 && v > 1 && psv > 25 && psv <= 50 && formdia1.option.checked){
		formdia1.ausgabe.value = III;}
		
		if (ps > 0.5 && v > 1 && psv > 50 && psv <= 200 ){
		formdia1.ausgabe.value = II;}
		
		if (ps > 0.5 && v > 1 && psv > 50 && psv <= 200 && formdia1.option.checked){
		formdia1.ausgabe.value = III;}
		
		if ((ps > 0.5 && v > 1 && psv > 200 && psv <= 1000) || (v <= 1 && v > 0.1 && ps > 200 && ps <= 1000)){
		formdia1.ausgabe.value = III;}
		
		if ((ps > 0.5 && ps <= 1000 && psv > 1000) || ps > 1000){
		formdia1.ausgabe.value = IV;}
		
		if (ps=="" || v=="" || isNaN(psv)==true){
		alert(meld3);}	
	}
</script>
<form name="formdia1" action="">
<div class="container" >

    <div class="elem1">
	<h2> PED Category Calculator</h2>
	<p class="table-nor-cent">Pressure Equipment Directive (PED) 2014/68/EU</p>
	<p class="table-nor-cent">Annex II  Table 1</p>
	</div>
	
	<div class="elem2">
	<p class="table-nor-right ">Type of Pressure Equipment:<br></p>
	<p class="table-nor-right ">Fluid:</p>
	<p class="table-nor-right ">Fluid Group:</p>
	</div>
	
		<div class="elem3">
		<p class="table-nor-left"><b>Pressure Vessel</b></p>
		<p class="table-nor-left"><b>Gas</b></p>
		<p class="table-nor-left"><b>1  </b>(Hazardous Fluids)</p>
	</div>
	
	<div class="elem4">
		<p><br><b>Gas</b>: Means all gases, vapours and liquids with a vapour pressure > 0,5 bar gauge at maximum allowable temperature;
		<p>Vessels intended to contain an unstable gas and falling within categories I or II on the basis of table 1 shall be classified in category III.</p>
	</div>
	
	<div class="elem5">
		<p class="table-nor-right"><b>Max. allowable Pressure</b></p>
	</div>
	
	<div class="elem6">
		<p class="table-nor-cent"> PS</p>
	</div>
	
	<div class="elem7">
		<p class="table-nor-left"><input type="number" name="eingabe1" size="8" value="" id="eingabe1"><label> [ bar ]</label></p>
	</div>
	
	<div class="elem8">
	<p class="table-nor-right"><b>Volume<br></b></p>
	</div>
	
	<div class="elem9">
	<p class="table-nor-cent">V</p>
	</div>
	
	<div class="elem10">
	<p class="table-nor-left"><input type="number" name="eingabe2" size="8" >
	  [ Litre ] </p>
	</div>
	
	<div class="elem11">
	<input form="formdia1" type="reset" value="RESET">
	</div>
	
	<div class="elem12">
    <p><input type="checkbox" value="eins" name="option"><label> Fluid is a instable gas</label>
	</div>
	
	<div class="elem13">
	<p class="table-nor-right"><b>Category:</b></p>
	</div>
	
	<div class="elem15">
	 <input type="button" size="24" name="berechnen" onClick="categorie ()" value="Calculate">
	</div>
	
	<div class="elem14">
    <input id="out" type="text" name="ausgabe" size="24" readonly>
	</div>
	
	<div class="elem16">
	<p>Special notes</p>
	</div>
</div>
</form>	
</html>

[Rolf B]

Hallo akuep,

Mit dem Nerd-Sniper verstehe ich nicht ganz.

Ein Sniper ist ein Heckenschütze.

Hast Du Dir den verlinkten XKCD Comic angeschaut?

Wer intensiv an einem Bereich interessiert ist (oftmals also ein Nerd), kann durch plötzlich aufkommende Themen derart abgelenkt werden, dass er alles andere vergisst. Im Comic führte das dazu, dass der Physiker mitten auf dem Zebrastreifen stehen blieb. Bis der Lastwagen kam…

Bei mir führte es dazu, dass ich anfing, ein paar Stunden an diesem SVG zu basteln. Und damit meine eigentliche Arbeit hinterrücks abgeschossen wurde.

Den kompletten Code posten brauchst Du übrigens nicht, wenn die Seite verlinkt werden kann. Dann guck ich in die Entwicklerwerkzeuge und sehe alles.

In dem, was Du gepostet hast, scheint die Übergabe des Forms an die categorie-Funktion zu fehlen.

Beschäftige Dich mit den Entwicklerwerkzeugen deines Browsers. Dann hättest Du in der Konsole gesehen, dass er formdia1 nicht kennt und deswegen abbricht.

Rolf

[akuep]

Danke für die schnelle Antwort.

Ich hatte noch ein anderes Formular mit der gleichen ID auf der Seite. Das habe ich gelöscht, und dann funktionierte es.

Was noch nicht Funktioniert is der Reset Button.

Den habe ich einmal als Button <div class="elem11"> <button formaction="" form="formdia1" type="reset">RESET</button> </div>

und einmal als INPUT: div class="elem11"> <input form="formdia1" type="reset" value="RESET"> </div>

Beides funktioniert nicht.

Übrigens, dein Vorschlag mit dem Schieberegler ist zwar hübsch, aber ich denke für diese Anwendung nicht sinnvoll.

Was ich vielleicht noch Versuche, die alert-meldungen in einem separaten Textfeld auszugeben, damit die länger präsent sind.

Und: Den Hintergrund des Ausgabefeldes "Category" mit den Farben im Diagramm anzupassen.

[Robert B.]

Moin akuep,

Was noch nicht Funktioniert is der Reset Button.

Den habe ich einmal als Button

<div class="elem11">
	<button formaction="" form="formdia1" type="reset">RESET</button>
	</div>

und einmal als INPUT:

<div class="elem11">
	<input form="formdia1" type="reset" value="RESET">
	</div>

Beides funktioniert nicht.

Bevor ich die obligatorische Frage stelle, was „funktioniert nicht“ konkret bedeutet, möchte ich die Frage nach den div aufwerfen – siehe auch Zitat #2613. Und das betrifft auch das vorherige Posting von dir: Was sollen diese ganzen divs?

Viele Grüße
Robert

[Auge]

Hallo

Ich hatte noch ein anderes Formular mit der gleichen ID auf der Seite. Das habe ich gelöscht, und dann funktionierte es.

Eine ID in einem Dokument ist ein Highlander.

Tschö, Auge

[Rolf B]

Hallo akuep,

<form name="formdia1">
<button formaction="" form="formdia1" type="reset">RESET</button>

<input form="formdia1" type="reset" value="RESET">
</form>

Beides funktioniert nicht.

So funktioniert's:

<form id="formdia1">
<button formaction="" form="formdia1" type="reset">RESET</button>

<input form="formdia1" type="reset" value="RESET">
</form>

Das form-Attribut bezieht sich immer auf eine id, nicht auf das name-Attribut. Das name-Attribut bei Forms ist nur begrenzt nützlich und eigentlich ein Relikt aus dem letzten Jahrtausend, wo es die Methode getElementById() noch nicht gab (im 1998er Selfhtml 7 war sie noch nicht dokumentiert, im 2001er Selfhtml 8.0 ist sie drin und nennt Netscape 6 und IE 5.5 als Kompatibilität).

Ich habe dazu mal einen Hinweis im Wiki hinterlassen.

Rolf

[MudGuard]

Hi,

So funktioniert's:

<form id="formdia1">
<button formaction="" form="formdia1" type="reset">RESET</button>

<input form="formdia1" type="reset" value="RESET">
</form>

solange die Buttons sich im form befinden, braucht's doch die form-Attribute überhaupt nicht (und damit auch die id am form ist dann überflüssig).

Wobei ein Reset-Button in den meisten Fällen eh nicht wirklich benötigt wird.

cu,
Andreas a/k/a MudGuard

[akuep]

Danke euch allen.

Der reset-button funktioniert jetzt!!

Ich finde ihn praktisch, damit kann mann schnell einige Berechnungen hintereinander ausprobieren.

Jetzt muss ich noch am Design weiter arbeiten.

Zunächst einmal möchte ich je nach Ergebnis, den Hintergrund des Ausgabefeldes verändern.

Viele Grüße Andreas

[akuep]

Sorry, ich brauche noch einmal Eure Hilfe. Bin schon seit zwei Tage an dem Script.

Der "Rest" funktioniert die eigentliche Funktion leider nicht (einfache keine Reaktion). In der Browser Console kommt die Fehlermeldung "Unexpected end of script". Ich habe schon alles 1000mal ausprobiert.

Könnt Ihr Euch noch einmal dieses Script ansehen:

<html>
<script>
function category () {
        'use strict';
		const ps = parseFloat(formdia1.eingabe1.value);
        const v = parseFloat(formdia1.eingabe2.value);
		let psv = ps*v;
		let Y = "No Category";
		let Z = "No Cat.; Free module selection!";
		let I = "Category I";
		let II = "Category II";
		let III = "Category III";
		let IV = "Category IV";
		let meld1 = "Das Druckgeraet ist aufgrund der eingegebenen Betriebsbedingungen (Druck, Volumen)  keiner Kategorie zuzuordnen und braucht keinem Konformitaetsbewertungsverfahren unterzogen werden. Folglich darf das Druckgeraet auch nicht mit einem CE-Kennzeichen versehen sein.  Das Druckgeraet muss jedoch in Uebereinstimmung mit der geltenden Ingenieurpraxis ausgelegt und hergestellt werden.";
		let meld2 = "Das Druckgeraet liegt aufgrund des geringen Gefahrenpotentials (Druck PS ≤ 0,5 bar) nicht im Geltungsbereich der Druckgeraeterichtlinie!";
		let meld3 = "Bitte tragen Sie in den beiden Feldern fuer Druck und Volumen Zahlenwerte ein (Schreibweise: Punkt statt Komma).";
		let meld4 = "Das Druckgeraet muss die grundlegenden Anforderungen des Anhang I erfuellen und eine CE-Kennzeichnung tragen. Fuer das Konformitaetsbewertungsverfahren besteht die freie Modulauswahl. Siehe hierzu die Leitlinie A-05";
		
		if (ps <= 0.5){
		alert(meld2);}
		
		if (ps > 200 && v > 0.0001 && v <= 0.1){
		alert(meld4);
		formdia1.ausgabe.value = Z;}
		
		if ((ps > 0.5  && ps <= 200 && v > 0.0001 && v <= 1) || (ps > 0.5 && v > 1 &&  psv <= 25)){
		alert(meld1);
		formdia1.ausgabe.value = Y;}

		if (ps > 0.5 && v > 1 && psv > 25 && psv <= 50){
		formdia1.ausgabe.value = I;}
		
		if (ps > 0.5 && v > 1 && psv > 25 && psv <= 50 && formdia1.option.checked){
		formdia1.ausgabe.value = III;}
		
		if (ps > 0.5 && v > 1 && psv > 50 && psv <= 200 ){
		formdia1.ausgabe.value = II;}
		
		if (ps > 0.5 && v > 1 && psv > 50 && psv <= 200 && formdia1.option.checked){
		formdia1.ausgabe.value = III;
		}
		
		if ((ps > 0.5 && v > 1 && psv > 200 && psv <= 1000) || (v <= 1 && v > 0.1 && ps > 200 && ps <= 1000)){
		formdia1.ausgabe.value = III;}
		
		if ((ps > 0.5 && ps <= 1000 && psv > 1000) || ps > 1000){
		formdia1.ausgabe.value = IV;}
		
		if (ps=="" || v=="" || isNaN(psv)==true){
		alert(meld3);
}
</script>
<form id="formdia1" action="">
    <div class="mycontainer" >
    <div class="head1">
	<h2> PED Category Calculator</h2>
	<p class="table-nor-cent">Pressure Equipment Directive (PED) 2014/68/EU</p>
	<p class="table-nor-cent">Annex II  Table 1</p>
	</div>
	
	<div class="head2">
	<p class="table-nor-right" > Type of Pressure Equipment:</p>
	<p class="table-nor-right" > Fluid:</p>
    <p class="table-nor-right" > Fluid Group:</p>
	</div>
	
	<div class="head3">
	<p class="table-nor-left"><b>Pressure Vessel</b></p>
	<p class="table-nor-left"><b>Gas</b></p>
	<p class="table-nor-left"><b>1  </b>(Hazardous Fluids)</p>
	</div>
	
	<div class="head4">
		<p><b>Gas</b>: Means all gases, vapours and liquids with a vapour pressure > 0,5 bar gauge at maximum allowable temperature;</p></div>
	<div class="maxPS">
		<p class="table-nor-right"><b>Max. allowable Pressure</b></p>
	</div>
	
	<div class="ps">
		<p class="table-nor-cent">PS <br> [bar]</p>
	</div>
	
	<div class="input1">
		<p class="table-nor-left"><input type="number" id="eingabe1" name="eingabe1"  value="" >
	</div>
	
	<div class="volume">
	<p class="table-nor-right"><b>Volume<br></b></p>
	</div>
	
	<div class="vol">
	<p class="table-nor-cent">V<br> [Litre]</p>
	</div>
	
	<div class="input2">
	<p class="table-nor-left"><input type="number" name ="eingabe2" size="8" >
	</div>
	
	<div class=reset>
	<button formaction="" form="formdia1" type="reset">RESET</button>
	</div>
	
	<div class="extra">
    <p><input type="checkbox" value ="" name="option"> Fluid is an instabile gas</p>
	</div>
	
	<div class="category">
	<p class="table-nor-right"><b>Category:</b></p>
	</div>
	
	<div class="calculate">
	 <input type="button" size="24" name="berechnen" onClick="category ()" value="Calculate">
	</div>
	
	<div class="result" >
    <input id="out" type="text" name="ausgabe" size="24" readonly>
	</div>
	
	<div class="excemption1">
	<p><b>Exceptions</b></p>
	<p class="table-nor-left">Vessels intended to contain an unstable gas and falling within categories I or II on the basis of table 1 shall be classified in category III.</p>
	</div>
	<div class="remarks1">
	<p><b>Remarks</b></p>
	<p class="table-nor-left"> </p>
	</div>
</div>
</form>
</html>

[Rolf B]

Hallo akuep,

was auch immer Du sonst tust, verwende einen brauchbaren Einrückungsstil. Es gibt einen Haufen davon, es ist völlig egal, welchen Du für Dich wählst, nur

• verwende einen der für JavaScript geeignet ist (Python-Stil wäre doof)
• sei konsistent

Dein Flat Style macht das Erkennen unpaariger Klammern nahezu unmöglich.

ICH habe deinen Code nach jsFiddle kopiert und auf den TIDY Button geklickt. Danach war es offensichtlich.

Rolf

[akuep]

Hallo Rolf,

super Tip mit dem Tool. Ich kann nicht erkennen, wo hier ein Fehler liegt (siehe Bild)

[JürgenB]

Hallo

< script > ist offensichtlich etwas anderes als <script>

Gruß
Jürgen

[akuep]

Hallo Jürgen!

Nein daran kann's nicht liegen. https://wiki.selfhtml.org/wiki/SELFHTML:Forum/Formatierung_der_Beiträge

JSFiddle:

Das habe ich schon geändert.

Als Fehler steht bei <script> UND bei </script> da "Missing Semikolon".

Das ist für mich ein Rätsel.

Beim Browser kommt die Fehlermeldung bei </script>: Unerwartetes Ende des Scripts

Gruß Andreas

[Rolf B]

Hallo Andreas,

du Schlauberger, die Script-Tags gehören ja auch nicht mit in den Script-Editor.

• Nur das Script da 'rein
• Auf Tidy klicken
• Besser sehen können was los ist

Du musst nicht jsFiddle nehmen, es gibt auch andere Editoren die einen prettyfier haben und die Einrückung für Dich aufräumen. Visual Studio Code kann es auch, würde ich annehmen.

Rolf

[akuep]

Hallo Rolf,

da muss man draufkommen.

Ich hebe die Script Tags entfernt.

Das fehlerfreie Script zurück in meine Anwendung, und es funktioniert.

Nochmals vielen Dank auch für den Tip mit jsFiddle.

Gruß Andreas