javascript - 使用 Javascript 对 "Form"进行简单除法

Question

我正在尝试做一些我认为非常简单的事情，但显然我在做这件事时遇到了困难。

我的页面上有两个输入字段(“销售额”、“费用”)。第三个输入字段应该是“费用”除以“销售额”的值。

一个警告:我不想要一个他们必须“提交”的标准表格。我只是希望它自动更新该值(用户付出的努力最少)。

<script type="text/javascript">
    var sale = document.getElementById('sales').value;
    var fee = document.getElementById('fees').value;
    document.getElementById('rate').value = sale / fee;
</script>

和

<p>Total purchases: <input type="text" name="sales" id="sales" /></p>
<p>Total fees: <input type="text" name="fees" id="fees" /></p>
<p>Your net rate is: <input type="text" name="rate" id="rate" /></p>

我假设有某种方法可以设置 id="rate" 的 value="..." 并且我可能有偏差我的尝试，但我希望有人能够帮助我解决这个问题。

谢谢!

Answer 1

您可以在 blur 事件或类似事件上设置此功能，但您也可以按一定时间间隔运行它以自动更新。将 setInterval 调用中的 100 更改为更大的数字，以查看刷新需要一些时间。

您在页面加载时运行过一次的 JavaScript，就是这样。

我还添加了一些基本的错误检查。

function calculateNetRate(){
  
  var sale = document.getElementById('sales').value;
    var fee = document.getElementById('fees').value;
  sale = isNaN(sale) ? 0 : sale;
  fee = isNaN(fee) ? 0 : fee;
  var netRate = fee > 0 ? sale / fee : NaN;
    document.getElementById('rate').value = isNaN(netRate) ? 0 : netRate;
  
}

setInterval(function(){
  
  calculateNetRate();
  }, 100);

<p>Total purchases: <input type="text" name="sales" id="sales" /></p>
<p>Total fees: <input type="text" name="fees" id="fees" /></p>
<p>Your net rate is: <input type="text" name="rate" id="rate" /></p>