Question

我试图做一些我认为非常简单的事情，但显然我在做这件事时遇到了麻烦。

我在一个页面上有两个输入字段（＆＃39; sales＆＃39;，＆＃39;费用＆＃39;）。第三个输入字段应该是＆＃39;费用的值。除以销售额＆＃39;。

一个警告：我不想要一个标准表格，他们必须提交＆＃34;提交＆＃34;它。我只是希望它自动更新值（用户部分的最小努力量）。

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

我假设有一些方法可以为value="..."设置id="rate"而我可能会因为我的尝试而离开基地，但我希望有人也许可以帮我解决这个问题。

谢谢！

Answer 1

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

你在页面加载时运行过的javascript，就是这样。

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您没有转换为整数;使用parseInt()

var sale = parseInt(document.getElementById('sales').value);
var fee = parseInt(document.getElementById('fees').value);
document.getElementById('rate').value = sale / fee;

此外，您需要一个onclick按钮，或者您可以在字段上使用onchange

<button onclick="run()">calculate</button>

现在将代码包装到run（）函数

中

function run(){

var sale = parseInt(document.getElementById('sales').value);
var fee = parseInt(document.getElementById('fees').value);
document.getElementById('rate').value = sale / fee;

}

工作演示：

＆＃13;

function run(){

var sale = parseInt(document.getElementById('sales').value);
var fee = parseInt(document.getElementById('fees').value);
document.getElementById('rate').value = sale / fee;
  
}

＆＃13;

<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>
<button onclick="run()">calculate</button>

＆＃13;

Answer 3

如果您不想使用按钮或在表单上提交，请在第二个输入框中使用 onKeyPress 事件。并创建一个函数来调用该事件。

你html代码在哪里调用函数：

<p>Total fees: <input type="text" name="fees" id="fees" onKeypress="myFunc()"/></p>

和您的javascript代码：

function myFunc() {
    var sale = document.getElementById('sales').value;
    var fee = document.getElementById('fees').value;
    document.getElementById('rate').value = sale / fee ;
}

但是你的代码肯定会出现像Infinity或NaN这样的错误。以下是有关该问题的一个很好的参考，请访问this网站。

用Javascript简单划分“表格”

3 个答案: