Javascript 文本框值未更新

我正在尝试制作一个脚本，可以计算退款金额，计算公式为：total=（tax*quantity）

总额和税额存储在隐藏的文本框中，我希望当数量更改时，退款的值也会更改。我的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;

    }
}

函数退款（）{
变量编号=document.getElementsByName（“值”）；
对于（i=0；i

它的屏幕截图是这样的：

因此，它的工作原理是，值是正确的，文本框是填充的，但当我更新数量字段时，值没有改变。我确信我遗漏了一些明显的东西，但由于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>

产品
量
价值
退款
当数量发生变化时，需要调用return（）函数

差不多


oninput=“return（）”是完成工作的方法

请参阅下面的代码

<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);

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

请查找下面的示例


功能退款（e）{
console.log（'e'，e.target.value）
}
我在jsfiddle中尝试了这个方法，效果不错

试试这把小提琴

只要确认当您更改
数量时，该方法是否一直被调用。您可以通过一个简单的
Console.log（）
来实现这一点。查看小提琴了解更多详细信息。
使用
onchange
附加到输入字段的事件调用
退款
我尝试了此操作，但结果相同，它们不会更新。您确定没有收到控制台错误消息吗？单击F12并查看浏览器控制台，查看更改值时出现的任何错误。不，没有，令人沮丧的是，它的工作正常，它设置值fine并调用函数fine位不起作用的是我更改了数量，然后它应该相应地更新值文本框，但遗憾的是它没有。@MikeAbineri你确定它在更新值时调用函数吗？尝试控制台。在方法中输出
退款
值，并查看其是否正常工作。我已尝试从onchange更改为onclick，只尝试了oninput，但在数量更改时，它不会更新文本框的值。请确保在输入之前声明函数return（）。另外，更改“final”变量的名称final’是一个JavaScript关键字。注意，我已将其从final更改为load，并在创建表单之前将脚本移动到load，这很奇怪，因为它正确设置了值，并且函数在用正确的数量填充值文本框时执行良好，当数量发生变化时，它不会更新。我现在已经更新了所有的函数，以绘制一幅更完整的图。它第一次调用时会调用，但从那时起，当我要更改它时，它不会更新，所以我似乎只能调用该函数一次？现在您可以逐行调试了。您只需尝试控制台调试。如果不是，只需删除函数内容并添加一个
控制台.log
并检查它是否被调用？如果是，则逐渐添加函数逻辑，以查看其失败的地方。如果不是，那么可能还有另一个问题。
var refund = total + (tax * quan);