Berechnungen funktionieren, wenn ich einen Wert einer var in meinem Code, aber nicht mit einer Eingabe

Question

Mein Code berechnet etwas korrekt, wenn ich manuell den Wert einer Var in meinem Code, aber es berechnet das gleiche falsch, wenn ich ein benutze Eingang.

Das ist mein Eingang:

<input id="e"> 

Dies ist, wo ich den Wert aus dem Eingang erhalten:

var e = document.getElementById("e").value; 

Dies ist die Berechnung, wo es schief geht:

var apoapsis = a*(1 + e); 

Und das ist meine gesamte Datei:

<h1>Orbit calculator</h1> 
<title>Orbit Calculator</title> 
e = 
<input id="e"> 
a = 
<input id="a"> 
mass = 
<input id="mass"> 
<button type="button" onclick="calculate()">calculate</button> 
<p id="velocity_p"></p> 
<p id="velocity_a"></p> 
<p id="gm"></p> 
<p id="periapsis"></p> 
<p id="apoapsis"></p> 
<p id="e_1"></p> 

<script>  

    function calculate() { 
     var e = document.getElementById("e").value; 
     // var e = 0.0167; 
     var a = document.getElementById("a").value; 
     var mass = document.getElementById("mass").value; 
     var apoapsis = a*(1 + e); 
     var periapsis = a*(1 - e); 
     var GM = mass * (6.67408 * (Math.pow((10), -11))); 
     var velocity_p = Math.pow((GM/a) * (1 + e)/(1 - e), 0.5); 
     var velocity_a = Math.pow((GM/a) * (1 - e)/(1 + e), 0.5); 

     document.getElementById("velocity_p").innerHTML = "The velocity at periapsis is " +  velocity_p + " m/s"; 
     document.getElementById("velocity_a").innerHTML = "The velocity at apoapsis is "  +velocity_a + " m/s"; 
     document.getElementById("periapsis").innerHTML = "The periapsis is " + periapsis + " m"; 
     document.getElementById("apoapsis").innerHTML = "The apoapsis is " + apoapsis + " m"; 
     document.getElementById("gm").innerHTML = "The GM of the parrent object is " + GM; 
     document.getElementById("e_1").innerHTML = e; 
    } 



</script> 
</body> 
</html> 

Answer 1

function calculate() { 
 
     var e = parseFloat(document.getElementById("e").value); 
 
     // var e = 0.0167; 
 
     var a = parseFloat(document.getElementById("a").value); 
 
     var mass = parseFloat(document.getElementById("mass").value); 
 
     var apoapsis = a*(1 + e); 
 
     var periapsis = a*(1 - e); 
 
     var GM = mass * (6.67408 * (Math.pow((10), -11))); 
 
     var velocity_p = Math.pow((GM/a) * (1 + e)/(1 - e), 0.5); 
 
     var velocity_a = Math.pow((GM/a) * (1 - e)/(1 + e), 0.5); 
 

 
     document.getElementById("velocity_p").innerHTML = "The velocity at periapsis is " +  velocity_p + " m/s"; 
 
     document.getElementById("velocity_a").innerHTML = "The velocity at apoapsis is "  +velocity_a + " m/s"; 
 
     document.getElementById("periapsis").innerHTML = "The periapsis is " + periapsis + " m"; 
 
     document.getElementById("apoapsis").innerHTML = "The apoapsis is " + apoapsis + " m"; 
 
     document.getElementById("gm").innerHTML = "The GM of the parrent object is " + GM; 
 
     document.getElementById("e_1").innerHTML = e; 
 
    }

<h1>Orbit calculator</h1> 
 
<title>Orbit Calculator</title> 
 
e = 
 
<input id="e"> 
 
a = 
 
<input id="a"> 
 
mass = 
 
<input id="mass"> 
 
<button type="button" onclick="calculate()">calculate</button> 
 
<p id="velocity_p"></p> 
 
<p id="velocity_a"></p> 
 
<p id="gm"></p> 
 
<p id="periapsis"></p> 
 
<p id="apoapsis"></p> 
 
<p id="e_1"></p>

Ihre E ist string, verwenden parseInt(e) oder parseFloat() wie in der Probe über

var apoapsis = a*(1 + parseInt(e,10)); 

Sie derzeit immer som ething wie

1 + "5" // "15" 

Answer 2

Verwendung parseFloat mit Dezimalzahlen

var e = document.getElementById("e").value; 
e = parseFloat(e);