亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

初學者簡單里程計算器:無法返回 Var

初學者簡單里程計算器:無法返回 Var

森欄 2022-09-29 15:53:41
我一直在努力教育自己,并研究如何讓這個簡單的計算器與JS一起工作的其他工作。我已經通過谷歌瀏覽器調試了它,我無法確定我錯過了什么基本原理;var theForm = document.forms["mmacalc"];function getsjourn(){    var theForm = document.forms["mmacalc"];    var sjourn = theForm.elements["sjourn"];    var smile =0;    if(sjourn.value!="")    {        smile = parseInt(sjourn.value);    }        return smile;}function getrjourn(){    var theForm = document.forms["mmacalc"];    var rjourn = theForm.elements["rjourn"];    var rmile =0;    if(rjourn.value!="")    {        rmile = parseInt(rjourn.value);    }      return rmile;}function getmilalallow(){    var tmile = sjourn() * rjourn() ;     document.getElementById('tjourn').innerHTML =                                     "Your total mileage is"+tmile;    var milal = sjourn() * rjourn() * 0.25 ;      document.getElementById('mmac').innerHTML =                                      "Your MMA Claim is: £"+milal;                                       }<script type="javascript" src="formulacalculations.js"></script><form name="mmacalc" id="mmacalc" action="" method="post" target="_self">    <label for ="sjourn"> Single Journey Mileage </label>    <input type="text" id="sjourn" name="sjourn" value="" onclick="calculateTotal()">    <br><hr>    <label for ="rjourn"> Amount of Return Journeys </label>    <input type="text" id="rjourn" name="rjourn" value="1" onclick="calculateTotal()">    <br><hr>    <input type="submit" value="Submit" onsubmit="getmilalallow()">    <br><hr>    <div class="tjourn" id="tjourn"></div>    <div class="mmac" id="mmac"></div></form>
查看完整描述

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>


查看完整回答
反對 回復 2022-09-29
  • 1 回答
  • 0 關注
  • 105 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號