初学者简单里程计算器：无法返回 Var

Question

我一直在努力教育自己，并研究如何让这个简单的计算器与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>

Answer 1

为此使用表单是不明智的，因为当您单击该按钮时，它将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>