Javascript/HTML 计算器中的按钮在擦除结果之前仅显示计算器结果一秒钟答案

【问题标题】：Button in Javascript/HTML calculator only shows calculator results for a second before erasing the resultsJavascript/HTML 计算器中的按钮在擦除结果之前仅显示计算器结果一秒钟
【发布时间】：2021-05-26 10:17:40
【问题描述】：

我是 Javascript 的新手，我创建的 html 计算器有问题。当我在 html/javascript 计算器中输入一个数字并按下“计算”按钮时，会出现正确的答案，但只有一秒钟，然后结果就消失了。

我的目标是能够在计算器 html 表单中输入一个数字，按下计算，并让结果持续显示（不会被删除），直到进行另一个计算。

我的代码如下所示：

function computeGal () {
  var sqfoot = document.getElementById('sqfoot').value;
  var totalgal = (sqfoot * 7 * 4 * 12 * 0.623).toFixed(0);
  totalgal = totalgal.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  document.getElementById('totalgal').innerHTML = totalgal;
}

function computeGalt () {
  var sqfoot = document.getElementById('sqfoot').value;
  var totalgalt = ((sqfoot * 7 * 4 * 12 * 0.623) * 20).toFixed(0);
  totalgalt = totalgalt.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  document.getElementById('totalgalt').innerHTML = totalgalt;
}

function computeCost () {
  var sqfoot = document.getElementById('sqfoot').value;
  var totalcost = ((((sqfoot * 7 * 4 * 12 * 0.623) /1000 * 6) + ((sqfoot * 7 * 4 * 12 * 0.623) /1000 * 5))).toFixed(2);
  totalcost = totalcost.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  document.getElementById('totalcost').innerHTML = "$"+totalcost;
}

function computeCostT () {
  var sqfoot = document.getElementById('sqfoot').value;
  var totalcostT = (((((sqfoot * 7 * 4 * 12 * 0.623) /1000 * 6) + ((sqfoot * 7 * 4 * 12 * 0.623) /1000 * 5)))*20).toFixed(2);
  totalcostT = totalcostT.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  document.getElementById('totalcostT').innerHTML = "$"+totalcostT;
}

<form align="center">
  <div>
    <label class="area">
      Area size (sq. ft.)
    </label>
    <p>
      <input type="number" id="sqfoot" min="1" max="1000000"/>
    </p>
    <button onclick="computeGal(), computeGalt(), computeCost(), computeCostT()">Calculate</button>
  </div>
</form>
<hr>

<table>
  <tr id="toptop">
    <th>Times (per week)</th>
    <th>Months</th>
    <th>Water Cost (per 1000 gallons)</th>
    <th>Sewage Cost (per 1000 gallons)</th>
    <th>Total Gallons (per year)</th>
    <th>Total Cost (per year)</th>
  </tr>
  <tr>
    <td>7</td>
    <td>12</td>
    <td>$6.00</td>
    <td>$5.00</td>
    <td><p id="totalgal"></p></td>
    <td><p id="totalcost"></p></td>
  </tr>
  <tr style="background:#f2f2f2;" id="twenty">
    <td colspan="4" align="right"><strong>20 years of watering</strong></td>
    <td>
      <p id="totalgalt" style="font-weight:bold;"></p>
    </td>
    <td>
      <p id="totalcostT" style="font-weight:bold;"></p>
    </td>
  </tr>
</table>
<hr>

关于如何修复此代码的任何建议？感谢您花时间阅读这篇文章，非常感谢您的帮助！

【问题讨论】：

标签： javascript html calculator calc

【解决方案1】：

我怀疑您的表单正在被提交。 HTML5 <button> 元素具有提交表单的默认行为。由于您使用的是表单标签，因此当您单击“计算”按钮时，会调用默认行为并提交表单。

您可以通过在元素上将type 属性显式设置为button 来解决此问题：

<button type="button" onclick="computeGal(), computeGalt(), computeCost(), computeCostT()">Calculate</button>

这是您进行此更改的代码：

function computeGal() {
  var sqfoot = document.getElementById('sqfoot').value;
  var totalgal = (sqfoot * 7 * 4 * 12 * 0.623).toFixed(0);
  totalgal = totalgal.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  document.getElementById('totalgal').innerHTML = totalgal;
}

function computeGalt() {
  var sqfoot = document.getElementById('sqfoot').value;
  var totalgalt = ((sqfoot * 7 * 4 * 12 * 0.623) * 20).toFixed(0);
  totalgalt = totalgalt.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  document.getElementById('totalgalt').innerHTML = totalgalt;

}

function computeCost() {
  var sqfoot = document.getElementById('sqfoot').value;
  var totalcost = ((((sqfoot * 7 * 4 * 12 * 0.623) / 1000 * 6) + ((sqfoot * 7 * 4 * 12 * 0.623) / 1000 * 5))).toFixed(2);
  totalcost = totalcost.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  document.getElementById('totalcost').innerHTML = "$" + totalcost;

}

function computeCostT() {
  var sqfoot = document.getElementById('sqfoot').value;
  var totalcostT = (((((sqfoot * 7 * 4 * 12 * 0.623) / 1000 * 6) + ((sqfoot * 7 * 4 * 12 * 0.623) / 1000 * 5))) * 20).toFixed(2);
  totalcostT = totalcostT.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  document.getElementById('totalcostT').innerHTML = "$" + totalcostT;
}

<form align="center">
  <div><label class="area">
      Area size (sq. ft.)</label>
    <p><input type="number" id="sqfoot" min="1" max="1000000" /></p>
    <button type="button" onclick="computeGal(), computeGalt(), computeCost(), computeCostT()">Calculate</button>
  </div>
</form>
<hr>

<table>
  <tr id="toptop">
    <th>Times (per week)</th>
    <th>Months</th>
    <th>Water Cost (per 1000 gallons)</th>
    <th>Sewage Cost (per 1000 gallons)</th>
    <th>Total Gallons (per year)</th>
    <th>Total Cost (per year)</th>
  </tr>
  <tr>
    <td>7</td>
    <td>12</td>
    <td>$6.00</td>
    <td>$5.00</td>
    <td>
      <p id="totalgal"></p>
    </td>
    <td>
      <p id="totalcost"></p>
    </td>
  </tr>
  <tr style="background:#f2f2f2;" id="twenty">
    <td colspan="4" align="right"><strong>20 years of watering</strong></td>
    <td>
      <p id="totalgalt" style="font-weight:bold;"></p>
    </td>
    <td>
      <p id="totalcostT" style="font-weight:bold;"></p>
    </td>
  </tr>
</table>
<hr>

【讨论】：

【解决方案2】：

当您单击提交时，表单正在提交，这基本上是对服务器的重定向。

第一种解决方法是彻底去掉form标签。

第二种解决方案是如果你想保留你的表单，但你需要使用 Event.preventDefault()

来阻止它提交

https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault

或者您可以只使用type="button" 而不是type="submit"。这样就不会提交表单并保留结果。

function computeGal() {
    var sqfoot = document.getElementById('sqfoot').value;
    var totalgal = (sqfoot * 7 * 4 * 12 * 0.623).toFixed(0);
    totalgal = totalgal.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    document.getElementById('totalgal').innerHTML = totalgal;
}

function computeGalt() {
    var sqfoot = document.getElementById('sqfoot').value;
    var totalgalt = ((sqfoot * 7 * 4 * 12 * 0.623) * 20).toFixed(0);
    totalgalt = totalgalt.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    document.getElementById('totalgalt').innerHTML = totalgalt;

}

function computeCost() {
    var sqfoot = document.getElementById('sqfoot').value;
    var totalcost = ((((sqfoot * 7 * 4 * 12 * 0.623) / 1000 * 6) + ((sqfoot * 7 * 4 * 12 * 0.623) / 1000 * 5))).toFixed(2);
    totalcost = totalcost.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    document.getElementById('totalcost').innerHTML = "$" + totalcost;

}

function computeCostT() {
    var sqfoot = document.getElementById('sqfoot').value;
    var totalcostT = (((((sqfoot * 7 * 4 * 12 * 0.623) / 1000 * 6) + ((sqfoot * 7 * 4 * 12 * 0.623) / 1000 * 5))) * 20).toFixed(2);
    totalcostT = totalcostT.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    document.getElementById('totalcostT').innerHTML = "$" + totalcostT;
}

<div>
   <label class="area">
   Area size (sq. ft.)</label>
   <p><input type="number" id="sqfoot" min="1" max="1000000"/></p>
   <button onclick="computeGal(), computeGalt(), computeCost(), computeCostT()">Calculate</button>
</div>
<hr>
<table>
   <tr id="toptop">
      <th>Times (per week)</th>
      <th>Months</th>
      <th>Water Cost (per 1000 gallons)</th>
      <th>Sewage Cost (per 1000 gallons)</th>
      <th>Total Gallons (per year)</th>
      <th>Total Cost (per year)</th>
   </tr>
   <tr>
      <td>7</td>
      <td>12</td>
      <td>$6.00</td>
      <td>$5.00</td>
      <td>
         <p id="totalgal"></p>
      </td>
      <td>
         <p id="totalcost"></p>
      </td>
   </tr>
   <tr style="background:#f2f2f2;" id="twenty">
      <td colspan="4" align="right"><strong>20 years of watering</strong></td>
      <td>
         <p id="totalgalt" style="font-weight:bold;"></p>
      </td>
      <td>
         <p id="totalcostT" style="font-weight:bold;"></p>
      </td>
   </tr>
</table>
<hr>

【讨论】：