尝试使用 JavaScript 制作动态发票

Question

我是一个非常非常新的 JavaScript 新手，我正在尝试制作动态发票，我只需在其中输入 "no. of items" x "item cost" = "total".目前，所有值都初始化为零。

差不多就这些了。我现在正处于尝试将它与 html 集成的阶段，所以这是一个示例代码（我从基于 bootstrap 的表单中获得了 html 代码，我没有尝试为了发挥创意，我只是想使表单具有交互性）。

忽略下面的小计和总计字段，我到那儿就过那座桥。非常感谢 :) 代码如下：

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

Answer 1

如果您将 keyup 上的价格和数量输入设置为运行计算这两个输入字段的乘积的函数，您可以将该值分配给第三个输入。

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

尝试使用 JavaScript 制作动态发票

Trying to make a dynamic invoice with JavaScript

javascript

dynamic

invoice