Einfache JavaScript-Funktion gibt Funktion und nicht Wert zurück

Question

Ich beginne gerade und ich versuche, eine einfache Berechnungsfunktion zu erstellen, die das Ergebnis von 2 Zahlen auf einer Seite anzeigen wird. Wenn der Submit Button gedrückt wird, ist die Ausgabe die Funktion und nicht der Wert. Wo bin ich falsch gelaufen?

HTML

<div id="input"> 
<form id="start"> 
    <input id="price" type="number" placeholder="What is the starting price?" value="10"> 
    <input id="tax" type="number" value="0.08" step="0.005"> 
</form> 
<button type="button" form="start" value="submit" onClick="total()">Submit</button> 
</div> 
<div id="test">Test</div> 

JS

<script> 
'use strict'; 

var total = function() { 

    var price = function() { 
    parseFloat(document.getElementById("price")); 
    } 

    var tax = function() { 
    parseFloat(document.getElementById("tax")); 
    } 
    var final = function() { 
    final = price * tax; 
    final = total 
    } 

    document.getElementById("output").innerHTML = final; 

}; 
</script> 

Answer 1

Sie haben mehrere Probleme mit Javascript. Lassen Sie uns sie brechen ein nach unten von einem:

var price = function() { 
    parseFloat(document.getElementById("price")); 
} 

document.getElementById ein Element zurückgibt. parseFloat würde versuchen, das Element zu berechnen, und nicht den Wert in diesem Fall (was immer NaN oder Not a Number wäre). Sie möchten den Wert dieses Elements, so dass .value den Wert zurückgibt. Außerdem tust du nichts mit dem Wert. (Sie sollten Rückkehr verwenden, um die Schwimmer gefunden zurückzukehren, oder legen Sie es auf eine andere Variable.)

var final = function() { 
    final = price * tax; 
    final = total 
} 

price und tax sind beide Funktionen in diesem Fall. Sie können sie nicht einfach multiplizieren, um das gewünschte Ergebnis zu erhalten. Mit var total = price() * tax(); wird nun die Variable total auf den von price() und tax() zurückgegebenen Gleitkommawert gesetzt. diesen Wert auf die Funktion der Rückkehr wird die nächste Zeile beheben:

final hier ist auch eine Funktion. Sie möchten es unter Verwendung von aufrufen.

finale Skript:

var total = function() { 
 

 
    var price = function() { 
 
    return parseFloat(document.getElementById("price").value); 
 
    } 
 

 
    var tax = function() { 
 
    return parseFloat(document.getElementById("tax").value); 
 
    } 
 
    var final = function() { 
 
    var total = price() * tax(); 
 
    return total 
 
    } 
 

 
    document.getElementById("output").innerHTML = final(); 
 

 
};

<div id="input"> 
 
    <form id="start"> 
 
    <input id="price" type="number" placeholder="What is the starting price?" value="10"> 
 
    <input id="tax" type="number" value="0.08" step="0.005"> 
 
    </form> 
 
    <button type="button" form="start" value="submit" onClick="total()">Submit</button> 
 
</div> 
 
<div id="output">test</div>

Answer 2

Sie einige Probleme haben, können Sie einige Code in Funktion setzen, ohne sie zu nennen.

Ein anderes Problem ist, benötigen Sie den Wert der Eingabe-Tags.

'use strict'; 
 
var total = function() { 
 
    var price = parseFloat(document.getElementById("price").value); 
 
    //           get value ^^^^^^ 
 
    var tax = parseFloat(document.getElementById("tax").value) 
 
    //          get value ^^^^^^ 
 

 
    // calculate directly the final value 
 
    var final = price * tax; 
 
    
 
    document.getElementById("output").innerHTML = final; 
 
};

<div id="input"> 
 
<form id="start"> 
 
    <input id="price" type="number" placeholder="What is the starting price?" value="10"> 
 
    <input id="tax" type="number" value="0.08" step="0.005"> 
 
</form> 
 
<button type="button" form="start" value="submit" onClick="total()">Submit</button> 
 
<div id="output"></div>

Answer 3

var final = function() { 
    final = price * tax; 
    final = total 
    } 

löschen und setzen stattdessen

return price * tax;