Question

我有三件事我无法弄清楚，只是学习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>

还有一个演示here

Answer 1

我编辑了小提琴，请参阅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);
}

但我确实有一些改进：

不要使用ID来引用字段。使用类和相关条目。
由于项目的值使用数值，因此javascript可以轻松使用它们。
重新计算总计服务器端，即使它仅供内部使用。总有一天会发生在你希望你检查它的地方。

Answer 2

我在开始时会提出一些改变：

您应该将价格存储为数字（200），而不是价值，然后在显示时将其格式化为价格。这样您就可以更轻松地使用数字进行数学运算。
在javascript中，您正在进行多人游戏a * b。 a * b是文档元素，它们不是数字。您正在寻找a.innerHTML * b.value。

DEMO

使用js计算用于开票的小计

2 个答案: