初学者简单里程计算器：无法返回 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我们将所有逻辑合并到一个函数中，该函数将在单击按钮时计算总计并更新两个段落。updateTotalsinnerHTMLvar theForm = document.forms["mmacalc"],&nbsp; &nbsp; &nbsp; sjourn = document.getElementById('sjourn'),&nbsp; &nbsp; &nbsp; rjourn = document.getElementById('rjourn'),&nbsp; &nbsp; &nbsp; tjourn = document.getElementById('tjourn'),&nbsp; &nbsp; &nbsp; mmac = document.getElementById('mmac');function updateTotals() {&nbsp; let total = sjourn.value * rjourn.value;&nbsp;&nbsp;&nbsp; tjourn.innerHTML = `Your total mileage is ${total}`,&nbsp; mmac.innerHTML = `Your MMA Claim is ${total*0.25}`;}<div id="mmacalc">&nbsp; <label for="sjourn"> Single Journey Mileage </label>&nbsp; <input type="text" id="sjourn" name="sjourn" value="">&nbsp; <br>&nbsp; <hr>&nbsp; <label for="rjourn"> Amount of Return Journeys </label>&nbsp; <input type="text" id="rjourn" name="rjourn" value="1">&nbsp; <br>&nbsp; <hr>&nbsp; <button onclick="updateTotals()">Submit</button>&nbsp; <br>&nbsp; <hr>&nbsp; <div class="tjourn" id="tjourn"></div>&nbsp; <div class="mmac" id="mmac"></div>&nbsp; </form>