1 回答

TA貢獻1856條經驗 獲得超11個贊
為此使用表單是不明智的,因為當您單擊該按鈕時,它將POST數據并刷新頁面。您可以使用 來解決此問題,但沒有必要 - 我們將為此將其更改為 div。當您需要將數據發送到服務器時,請使用 - 對于客戶端內容,請避免表單。input[type=submit]event.preventDefault()form
此外,您將邏輯綁定到文本輸入的事件Listener,因此每當用戶點擊文本字段時,它都會進行計算。我刪除了這些事件接收器,并將其移動到提交按鈕,因此當用戶點擊該按鈕時,UI 會更新。onclick
我們將所有邏輯合并到一個函數中,該函數將在單擊按鈕時計算總計并更新兩個段落。updateTotalsinnerHTML
var theForm = document.forms["mmacalc"],
sjourn = document.getElementById('sjourn'),
rjourn = document.getElementById('rjourn'),
tjourn = document.getElementById('tjourn'),
mmac = document.getElementById('mmac');
function updateTotals() {
let total = sjourn.value * rjourn.value;
tjourn.innerHTML = `Your total mileage is ${total}`,
mmac.innerHTML = `Your MMA Claim is ${total*0.25}`;
}
<div id="mmacalc">
<label for="sjourn"> Single Journey Mileage </label>
<input type="text" id="sjourn" name="sjourn" value="">
<br>
<hr>
<label for="rjourn"> Amount of Return Journeys </label>
<input type="text" id="rjourn" name="rjourn" value="1">
<br>
<hr>
<button onclick="updateTotals()">Submit</button>
<br>
<hr>
<div class="tjourn" id="tjourn"></div>
<div class="mmac" id="mmac"></div>
</form>
添加回答
舉報