Question

我正在尝试制作一个可以计算退款金额的脚本，用于计算退款的公式：总计=（税额*数量）。

总数和税额存储在隐藏的文本框中，我希望在更改数量时更改退款额，我的javascript函数是：

  function refund(){
  var number = document.getElementsByName("value");
  for (i = 0; i < number.length; i++) { 
      var tax = document.getElementsByName("tax")[i].value;
      var total = document.getElementsByName("total")[i].value;
      var quan = document.getElementsByName("quantity")[i].value;
      var final = +total + (+tax * +quan);
      document.getElementsByName("value")[i].value = final;

    }
}

，其屏幕截图如下：

因此，它的工作方式是正确的值和填充的文本框，但是当我更新数量字段时，值没有改变。我肯定会遗漏一些明显的东西，但是由于javascript对我来说是新的，所以我找不到它，因此任何帮助将不胜感激。

编辑：这是整个表格，表格和javascript代码的示例：

 <table class="list" style="table-layout: auto;width: 65%;margin-left: auto;margin-right: auto;text-align: center;">
      <thead>
        <tr>
          <td>Product</td>
          <td>Quantity</td>
          <td>Value</td>
          <td>Refund</td>
        </tr>
      </thead>
<?php foreach($missing_products as $missing){?>
  <?php $total = $missing['total'] + ($missing['tax'] * $missing['quantity']);?>
  <input type="hidden" name="tax" value="<?php echo $missing['tax']; ?>">
  <input type="hidden" name="total" value="<?php echo $missing['total']; ?>">
  <tr>
    <td><?php echo $missing['name']; ?></td>
    <td><input type="number" onclick="refund();" name="quantity" min="1" max="<?php echo $missing['quantity'];?>" value="<?php echo $missing['quantity'];?>"></td>
    <td><input type="text" id="value" name="value" value=""></td>
  </tr>
<?php }?>     
    </table>

<script>
function refund(){
  var number = document.getElementsByName("value");
  for (i = 0; i < number.length; i++) { 
      var tax = document.getElementsByName("tax")[i].value;
      var total = document.getElementsByName("total")[i].value;
      var quan = document.getElementsByName("quantity")[i].value;
      var refund = +total + (+tax * +quan);
      document.getElementsByName("value")[i].value = refund;

    }
}
</script>

Answer 1

数量更改时，您需要调用退款（）函数。

类似

<input type = "text" id = "quantity1" name = "quantity1" oninput = "refund()">

oninput =“ refund（）”是完成工作的条件

请在下面查看此代码

<script>
function refund(){
    //sums two numbers
    var n1 = document.getElementById('n1').value;
    var n2 = document.getElementById('n2').value;

    n1 = parseInt(n1);
    n2 = parseInt(n2)

    if(!isNaN(n1) && !isNaN(n2)){
        document.getElementById('result').value = n1 + n2;
    }
}
</script>

<input type = "text" oninput = "refund()" id = "n1"> + 
<input type = "text" oninput = "refund()" id = "n2"> = 
<input id = "result">

存在语法问题

var refund = +total + (+tax * +quan);

应该是

var refund = total + (tax * quan);

Answer 2

我在jsfiddle中尝试过，而且还可以。

尝试这个小提琴https://jsfiddle.net/3kyux1j0/

只需确认当您更改Quantity时，该方法是否一直被调用。您可以使用简单的Console.log()来完成此操作。有关更多详细信息，请参见小提琴。

Answer 3

您可以使用onchange事件并在函数中接受该事件，还可以使用target.value更新DOM上的数据。

请在下面找到示例

function refund(e){
  console.log('e', e.target.value)
}

<input type="number" onchange="refund(event);" name="quantity" min="1">

文本框值未更新

3 个答案: