Question

我的表格几乎完美无缺。如果我对默认价格应用折扣是更改，如果我申请税，它也会自动填充。但最后一个字段与折扣加税后的价格总和不起作用。有什么想法吗？

这是代码和小提琴

<html>
  <body>
<table width="339" border="0" cellpadding="0">
  <tr>
    <td width="98">Taxes</td>
    <td width="115">Discount</td>
    <td width="118">Default price</td>
  </tr>
  <tr>
    <td><select class="select" name="taxes" onChange="updateInput()">
      <option value="no" selected>no taxes</option>
      <option value="19">19% taxes</option> <!-- <====================== -->
    </select></td>
    <td><select class="select" name="discount" onChange="updateInput()">
        <option value="0" selected>0% discount</option>
      <option value="5">5% discount</option>
      <option value="10">10% discount</option>
      <option value="20">20% discount</option>
    </select></td>
    <td><input type="text" class="input140" name="cost" id="cost" value="1000"></td>
  </tr>
  <tr>
    <td>Price after discount</td>
    <td>Taxes</td>
    <td>Total Price to pay</td>
  </tr>
  <tr>
    <td><input type="text" name="price" value="1000"></td>
    <td><input type="text" name="ttaxes" value="0"></td> <!-- <====================== -->
    <td><input type="text" name="total" value="0"></td>
  </tr>
</table>
<script type="text/javascript">
function updateInput(){
    var discount = document.getElementsByName("discount")[0].value;
    var cost = document.getElementsByName("cost")[0].value;
    document.getElementsByName("price")[0].value = cost - (cost * (discount / 100));

    var taxes = document.getElementsByName("taxes")[0].value; // <======================
    if ( isNaN( taxes ) ) // IF "no taxes" IS SELECTED...
         document.getElementsByName("ttaxes")[0].value = 0;
    else { cost = document.getElementsByName("price")[0].value;
           document.getElementsByName("ttaxes")[0].value = (cost * (taxes / 100));
         }
}
</script>
  </body>
</html>

小提琴演示

https://jsfiddle.net/nte6xqdv/7/

我需要最后一个字段Total来支付总和＆＃34;折扣后的价格税＆＃34;自动但不起作用

非常感谢

Answer 1

我猜您的问题是两个输入是字符串，并且您使用jar运算符来连接它们。应将其转换为数字以进行添加操作。

https://jsfiddle.net/ssk7833/nte6xqdv/8/

Answer 2

function updateInput(){
var total = document.getElementsByName("total")[0];
var taxes = document.getElementsByName("ttaxes")[0].value;
var price = document.getElementsByName("price")[0].value; 

var discount = document.getElementsByName("discount")[0].value;
var cost = document.getElementsByName("cost")[0].value;
document.getElementsByName("price")[0].value = cost - (cost * (discount / 100));

var taxes = document.getElementsByName("taxes")[0].value; // <======================
if ( isNaN( taxes ) ) // IF "no taxes" IS SELECTED...
     document.getElementsByName("ttaxes")[0].value = 0;
else { cost = document.getElementsByName("price")[0].value;
       document.getElementsByName("ttaxes")[0].value = parseInt(cost * (taxes / 100));
     }
total.value = parseInt(taxes * 10) + parseInt(price) || parseInt(price); //No NaNs
}

Answer 3

每当输入更改使用jQuery时调用updateInput ... jQuery非常易于使用和学习，并且每个JavaScript程序员都应该知道如何使用它。

在jquery中...调用change回调：

$("#inputFieldIdHere").change(updateInput())

这会做什么？
这将做几件事。它会：

等到输入字段改变了
当输入字段的内容发生变化时，它将调用函数：updateInput()

Answer 4

如果您将流程的每个部分分开，您可能会发现更容易识别您遇到的问题。

如果您在开始时存储了将要使用的所有元素，那么您将使计算更容易阅读，并避免不必要的DOM调用。

/**
 * Elements
 */
var taxes    = document.getElementsByName('taxes')[0];
var discount = document.getElementsByName('discount')[0];
var cost     = document.getElementsByName('cost')[0];
var price    = document.getElementsByName('price')[0];
var ttaxes   = document.getElementsByName('ttaxes')[0];
var total    = document.getElementsByName('total')[0];


/**
 * Calculations
 */
function updateInput() {
  price.value = cost.value - (cost.value * (discount.value / 100));
  ttaxes.value = (price.value * (taxes.value / 100));
  var sum = parseFloat(price.value) + parseFloat(ttaxes.value);
  total.value = sum.toFixed(2);
}


/**
 * Event Listeners
 */
taxes.addEventListener('change', updateInput);
discount.addEventListener('change', updateInput);
cost.addEventListener('change', updateInput);
cost.addEventListener('keyup', updateInput);

<table width="339" border="0" cellpadding="0">
  <tr>
    <td width="98">Taxes</td>
    <td width="115">Discount</td>
    <td width="118">Default price</td>
  </tr>
  <tr>
    <td>
      <select name="taxes" class="select">
        <option value="0" selected>no taxes</option>
        <option value="19">19% taxes</option>
      </select>
    </td>
    <td>
      <select name="discount" class="select">
        <option value="0" selected>0% discount</option>
        <option value="5">5% discount</option>
        <option value="10">10% discount</option>
        <option value="20">20% discount</option>
      </select>
    </td>
    <td>
      <input type="text" name="cost" class="input140" value="1000">
    </td>
  </tr>
  <tr>
    <td>Price after discount</td>
    <td>Taxes</td>
    <td>Total Price to pay</td>
  </tr>
  <tr>
    <td><input type="text" name="price" value="1000"></td>
    <td><input type="text" name="ttaxes" value="0"></td>
    <td><input type="text" name="total" value="0"></td>
  </tr>
 </table>

Javascript表单输入的总和

4 个答案: