Ich versuche eine dynamische Rechnung mit JavaScript zu erstellen

Question

Ich bin ein sehr, sehr neuer JavaScript-Neuling, ich versuche eine dynamische Rechnung zu erstellen, wo ich einfach die "Anzahl der Artikel" x "Artikelkosten" = "Gesamt eintippe ". Im Moment sind alle Werte auf Null initialisiert.

Das ist so ziemlich das. Ich bin jetzt auf der Bühne, wo ich versuche, es mit HTML zu integrieren, also hier ist ein Beispielcode (Ich habe den HTML-Code aus Bootstrap-basierten Formen, ich versuche nicht, kreativ zu sein, ich versuche nur, das zu machen Formular interaktiv).

Ignorieren Sie einfach die Zwischen- und Gesamtfelder unten, ich werde nur die Brücke überqueren, wenn ich dort bin. Vielen Dank :)-Code ist unten:

[link] http://codepen.io/ascdesignstudio/pen/JKvQoq 

Answer 1

Wenn Sie sowohl die Preis- und Mengeneingänge auf keyup gesetzt, eine Funktion ausführen, um das Produkt dieser beiden Eingabefelder zu berechnen, können Sie diesen Wert zu Ihrem dritten Eingang zuweisen.

var totalPrice = function() { 
 
    // get the value of the price input 
 
    var price = document.getElementById("inputPrice").value 
 
    //get the value of the quantity input 
 
    var quantity = document.getElementById("inputNoOfItems").value 
 
    // assign the product of the above two inputs to the total 
 
    document.getElementById("inputTotal").value = price * quantity 
 
}

<span>Item Name</span> 
 
<!-- on keyup of both of these inputs, run a function to determine the total --> 
 
<input type="text" id="inputNoOfItems" value="0" onkeyup="totalPrice()"> 
 
<input type="text" id="inputPrice" value="0" onkeyup="totalPrice()"> 
 
<input type="text" id="inputTotal" value="0">

updated codepen