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.

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>

 

[bodo92]

Hab hier zumindest auf die schnelle Problem 1 gelöst: https://jsfiddle.net/a8zy3tyz/

Problem war das 0 als FALSE gewertet wird und daher deine Rechnung nicht durchgeführt wurde..

 

[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>&#92;( A_{H}=&#92;frac{U_{H}*d}{I*B} &#92;)</mark>

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

<label>Hall-Spannung &#92;(U_{H}&#92;) 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>

 

[B3nnoX]

Also ich geh mal auf den ersten Punkt ein. Wenn sich etwas oft wiederholt, dann lagere es als funktion aus.

Ich hab mal ein grobes Beispiel

function replaceFunc(elem) {
  return parseFloat(elem.value.replace('*10^', 'e').replace(',', '.').replace('(','').replace(')',''));
}


function berechnen1(){

var hallspannung1 = replaceFunc(document.getElementById('hallspannung1'));
var strom1 = replaceFunc(document.getElementById('strom1'));
var magnetfeld1 = replaceFunc(document.getElementById('magnetfeld1'));
var dicke1 = replaceFunc(document.getElementById('dicke1'));

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...';
}
}