使用js计算发票的小计

calculating subtotals for invoicing using js

本文关键字：js 计算 使用      更新时间：2023-09-26

我有三件事想不通，只是学习JS，但我将从第一件开始

好吧，昨天我得到了几个人的帮助，其中一人建议我不要在文本字段中输入总数，我必须想办法做到这一点。因此，我在产品中加入了一个下拉菜单，根据您选择的产品，该项目的相应价格显示在每列价格中。

现在我遇到的问题是得到项目价格X数量=小计。我现在想不出如何为它编写脚本。我将公布编码。

JS:

var item = document.getElementById('item');
var a = document.getElementById('A');
var b = document.getElementById('B');
item.onchange = function() {
    A.innerHTML = this.value;
    document.getElementById('result'+row).value = a * b;
};

HTML:

<form name="frm">
  <input name="add" type="button" value="Add Row"/>
    <table width="34%" border="0">
        <tr bgcolor="#B80000">
          <td width="5%"><div align="center"></div></td>
            <td width="43%">
                <div align="center">Item Description</div>
            </td>
            <td width="21%">
                <div align="center">Price Per</div>
            </td>
            <td width="20%">
                <div align="center">Quantity</div>
            </td>
            <td width="11%">
                <div align="center">SubTotal</div>
            </td>
        </tr>
        <tr>
          <td><div align="center">1</div></td>
            <td height="43">
                <div align="center">
                   <select name="item" id="item" size="1">
  <option value="">Select Product</option>
  <option value="$200.00">iPhone 4</option>
  <option value="$300.00">iPhone 4S</option>
  <option value="$450.00">iPhone 5</option>
  <option value="$300.00">Galaxy S3</option>
  <option value="$450.00">Galaxy S4</option>
  <option value="$450.00">Galaxy Note ll</option>
  <option value="$600.00">Galaxy Note lll</option>
  <option value="$700.00">Galaxy S5</option>
  <option value="$500.00">HTC One</option>
  <option value="$650.00">HTC One M8</option>
</select>
            </div>
        </td>
        <td>
            <div align="center">
                <span id="A"></span>
            </div>
        </td>
        <td>
            <div align="center">
                <input name="B" type="Text" id="B"/>
            </div>
        </td>
        <td>
            <div align="center">
                <span id="result"></span>
            </div>
        </td>
  </tr>
    <tr>
  <tr>
      <td><div align="center"></div></td>
        <td height="44">
            <div align="center"></div>
        </td>
        <td>
            <div align="center"></div>
        </td>
<td>
            <div align="center">TOTAL:</div>
        </td>
        <td>
            <div align="center">
              <input name="Total" type="Text" id="Total" size="8" />
            </div>
        </td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td height="44">&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td><input type="button" value="Exit" onClick="window.location.reload();"></td>
    </tr>
</table>

这里还有一个演示

我编辑了小提琴，请参阅http://jsfiddle.net/yrQP9/1/，并且这是有效的。

我已经从项目列表中的值中删除了所有$符号。

var item = document.getElementById('item');
var a = document.getElementById('A');
var b = document.getElementById('B');
item.onchange = function() {
    A.innerHTML = "$" + this.value;
    b.value = 1; //Order 1 by default.
    add();
};
b.onchange = function() {
    add();
}
function add() {
    // getting item.value and B.value (no need to use the display field for this.)
    var a = document.getElementById('item').value,
        b = document.getElementById('B').value;
    document.getElementById('result').innerHTML = "$" + (a * b);
}

但我确实有一些改进：

  1. 不要使用ID来引用字段。使用类和相对条目
  2. 由于项的值使用了一个数值，因此javascript可以轻松地使用它们
  3. 重新计算服务器端的总数，即使它只是内部使用。总有一天会发生一些事情，你会希望自己已经检查过了

一开始我建议进行几个更改：

  1. 您应该将价格存储为数字（200），然后在显示价格时将其格式化为价格，而不是值。这样可以让你更容易地用数字做数学运算。

  2. 在javascript中，您正在多重播放a * b。a*b是文档元素，它们不是数字。您正在查找a.innerHTML * b.value。

演示

相关文章：