[FRAGE] Formel ausrechnen lassen - was kann man besser machen?

[Universaldenker]

Hallo,

ich hatte noch nie etwas mit JavaScript zu tun, jetzt möchte ich es aber lernen. Dazu habe ich einen einfachen "Formelrechner" versucht zu programmieren, was jedoch nicht so gut klappt.

Hall-Effekt: Formeln für Hallspannung mit Online-Rechner

Im 1. Rechner: wenn ich z.B. für die Stromstärke oder magnetische Flussdichte "0" eingebe, zeigt er mir dann nicht als Ergebnis 0. Warum?
Im 2. Rechner gibt er mir irgendwie falsche Werte heraus. Warum?

Und habt ihr vielleicht Verbesserungsvorschläge bzgl. des Codes und des Formelrechners selbst?

Hier ist der JavaScript-Code:

<script>
function berechnen(){
var hallKonstante1 = parseFloat(document.getElementById('hallKonstante1').value.replace(',', '.'));
var strom1 = parseFloat(document.getElementById('strom1').value.replace(',', '.'));
var magnetfeld1 = parseFloat(document.getElementById('magnetfeld1').value.replace(',', '.'));
var dicke1 = parseFloat(document.getElementById('dicke1').value.replace(',', '.'));

var elementarladung = 1.6021766208*Math.pow(10,-19);

var ladungsdichte2 = parseFloat(document.getElementById('ladungsdichte2').value);
var strom2 = parseFloat(document.getElementById('strom2').value);
var magnetfeld2 = parseFloat(document.getElementById('magnetfeld2').value);
var dicke2 = parseFloat(document.getElementById('dicke2').value);

if(hallKonstante1 && strom1 && magnetfeld1 && dicke1){
document.getElementById('hallspannung-anzeigen1').innerHTML = '<h3>Ergebnis</h3><mark> U<sub>H</sub> ='+(hallKonstante1 * strom1 * magnetfeld1) / dicke1 + ' V</mark>';
}

if(ladungsdichte2 && strom2 && magnetfeld2 && dicke2){
document.getElementById('hallspannung-anzeigen2').innerHTML = '<h3>Ergebnis</h3><mark> U<sub>H</sub> ='+(strom2 * magnetfeld2) / (ladungsdichte2 * elementarladung * dicke2) + ' V</mark>';
}

}
</script>

Danke im Voraus!

 

[kkapsner]

Im 1. Rechner: wenn ich z.B. für die Stromstärke oder magnetische Flussdichte "0" eingebe, zeigt er mir dann nicht als Ergebnis 0. Warum?

Du hast doch extra eine if-Abfrage reingebaut, die die Ausgabe unterbindet, wenn irgendeines der Werte 0 ist.

Im 2. Rechner gibt er mir irgendwie falsche Werte heraus. Warum?

Die Formeln sehen richtig aus. Welche Werte meinst du denn, das falsch sind?

PS: Zahlen mit Zehnerpotenzen kann man mit der Literalschreibweise schreiben: 1.6022e-19

 

[Universaldenker]

Danke für die Antwort! Ich habs jetzt verbessert!

Ich würde gerne noch zwei Dinge klären:
1) Kann man den folgenden JavaScript-Code irgendwie kompakter schreiben? Ich habe z.B. gleiches "replace" bei vielen Variablen eingesetzt, gehts auch kompakter?
2) Wie kann ich jetzt dafür den Submit-Button deaktivieren, solange die Berechnung des Ergebnisses durchgeführt wird ? (Damit der Besucher nicht tausendmal auf den Button klickt)

<script>
var elementarladung = 1.60217662*Math.pow(10,-19);


function berechnen1(){

var hallspannung1 = parseFloat(document.getElementById('hallspannung1').value.replace('*10^', 'e').replace(',', '.').replace('(','').replace(')',''));
var strom1 = parseFloat(document.getElementById('strom1').value.replace('*10^', 'e').replace(',', '.').replace('(','').replace(')',''));
var magnetfeld1 = parseFloat(document.getElementById('magnetfeld1').value.replace('*10^', 'e').replace(',', '.').replace('(','').replace(')',''));
var dicke1 = parseFloat(document.getElementById('dicke1').value.replace('*10^', 'e').replace(',','.').replace('(','').replace(')',''));
var ergebnis1 = parseFloat((hallspannung1 * dicke1) / (strom1 * magnetfeld1));
ergebnis1 = (Math.round(ergebnis1 * 1000000) / 1000000).toExponential();
var exp1 = ergebnis1.substring(ergebnis1.indexOf("e") + 1);


if(!isNaN(hallspannung1) && !isNaN(strom1) && !isNaN(magnetfeld1) && !isNaN(dicke1)){
document.getElementById('anzeigen1').innerHTML = '<strong>Ergebnis</strong><br>U<sub>H</sub> = '+ergebnis1.replace('e',' * 10').replace(exp1,'<sup>'+exp1.replace('+','')+'</sup>')+' V';
} else {
document.getElementById('anzeigen1').innerHTML = '<strong>Fehler:</strong> Überprüfe Deine Angaben...';
}

}


</script>

<article id="1"><a href="#1"><h2>Hall-Konstante bei gegebener Hallspannung</h2></a>

<mark>\( A_{H}=\frac{U_{H}*d}{I*B} \)</mark>

<details><summary>Hall-Konstante online berechnen</summary>

<label>Hall-Spannung \(U_{H}\) in V<br><input id="hallspannung1" type="text"></label>
<label>Stromstärke I in A<br><input id="strom1" type="text"></label>
<label>Magnetische Flussdichte B in T<br><input id="magnetfeld1" type="text"></label>
<label>Dicke des Metallplättchens d in m<br><input id="dicke1" type="text"></label><br>
<input type="submit" value="Berechnen" onclick="berechnen1();">
<p id="anzeigen1"></p>
</details>

</article>

 

[kkapsner]

Ich habe z.B. gleiches "replace" bei vielen Variablen eingesetzt, gehts auch kompakter?

Klar. Du kannst eine Funktion machen, die einen String als Parameter erwartet, dann die Operationen durchführt und dann die Zahlrückliefert.

Wie kann ich jetzt dafür den Submit-Button deaktivieren, solange die Berechnung des Ergebnisses durchgeführt wird ?

Solange der Browser berechnet, also JS aursührt, kann der Benutzer sowieso nicht mit der Oberfläche interagieren, da JS den UI-Thread blockiert. Aber in deinem Fall wird man den Unterschied nicht bemerken, da du ja keine komplexen Berechnung durchführst.

 

[paul schmitz]

Hier das ganze in schöner und kompakter.

• replace in eigene Funktion
• Einrückungen zur besseren lesbarkeit
• statt exp 123e4
• NaN-Bedingung umgedreht (spart 4x Negation)
• Formularfeld und Beschriftung in einer Zeile

<html>
<body>
<script>
function berechnen_replace(val){
	return val.replace('*10^', 'e').replace(',', '.').replace('(','').replace(')','')
}

function berechnen1(){
	var elementarladung,hallspannung1,strom1,magnetfeld1,dicke1,ergebnis1,exp1;
	elementarladung		= 1.60217662e-19,
	hallspannung1 		= parseFloat(berechnen_replace(document.getElementById('hallspannung1').value)),
	strom1			= parseFloat(berechnen_replace(document.getElementById('strom1').value)),
	magnetfeld1		= parseFloat(berechnen_replace(document.getElementById('magnetfeld1').value)),
	dicke1			= parseFloat(berechnen_replace(document.getElementById('dicke1').value)),
	ergebnis1		= (Math.round(parseFloat((hallspannung1 * dicke1) / (strom1 * magnetfeld1)) * 1e6) / 1e6).toExponential(),
	exp1			= ergebnis1.substring(ergebnis1.indexOf("e") + 1);

	if(isNaN(hallspannung1) || isNaN(strom1) || isNaN(magnetfeld1) || isNaN(dicke1)){	
		document.getElementById('anzeigen1').innerHTML = '<strong>Fehler:</strong> Überprüfe Deine Angaben...';
	}else{
		document.getElementById('anzeigen1').innerHTML = '<strong>Ergebnis</strong><br>U<sub>H</sub> = '+ergebnis1.replace('e',' * 10').replace(exp1,'<sup>'+exp1.replace('+','')+'</sup>')+' V';
	}
}
</script>
<article id="1">
	<a href="#1">
		<h2>Hall-Konstante bei gegebener Hallspannung</h2>
	</a>
	<mark>\( A_{H}=\frac{U_{H}*d}{I*B} \)</mark>
	<details>
		<summary>Hall-Konstante online berechnen</summary>
		<label>Hall-Spannung \(U_{H}\) in V: <input id="hallspannung1" type="text"/><br/></label>
		<label>Stromstärke I in A: <input id="strom1" type="text"/><br/></label>
		<label>Magnetische Flussdichte B in T: <input id="magnetfeld1" type="text"/><br/></label>
		<label>Dicke des Metallplättchens d in m: <input id="dicke1" type="text"/><br/></label>
		<br/>
		<input type="submit" value="Berechnen" onclick="berechnen1();"/>
		<p id="anzeigen1"></p>
	</details>
</article>
</body>
</html>

(EDIT: Einrückungen korrigiert)

 

[Universaldenker]

Ui, super! Danke euch für die Hilfe =)