用JavaScript對“表單”進行簡單划分

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>

我假設有某種方法可以將value="..."為id="rate" ，我的嘗試可能會偏離基准，但我希望有人能夠為我提供幫助有了這個。

謝謝！

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> 

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;

}

工作演示：

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

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

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的錯誤。 這是有關該問題的很好的參考，請訪問此站點。