尝试使用 JavaScript 制作动态发票答案

【问题标题】：Trying to make a dynamic invoice with JavaScript尝试使用 JavaScript 制作动态发票
【发布时间】：2016-07-26 05:39:40
【问题描述】：

我是一个非常非常新的 JavaScript 新手，我正在尝试制作一张动态发票，我只需输入“物品数量”x“物品成本”=“总计”。目前，所有值都初始化为零。

差不多就是这样。我现在正处于尝试将其与 html 集成的阶段，所以这里有一个示例代码（我从基于引导程序的表单中获得了 html 代码，我不是想有创意，我只是想制作表单交互）。

忽略下面的小计和总计字段，当我到达那里时，我会越过那座桥。非常感谢:) 代码如下：

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

【问题讨论】：

我应该把整个代码贴在这里吗？我正试图让它从 codepen 链接，但我遇到了麻烦。
你遇到了什么问题？
嗨原型链，链接在这里：codepen.io/ascdesignstudio/pen/JKvQoq 抱歉，我发现将代码直接放在 stackoverflow 上时遇到问题。我只是想将 2 个字段相乘，这样我就可以得到数量/答案。但都会出现在html文档中。

标签： javascript dynamic invoice

【解决方案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

【讨论】：