问题：

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

杨骁

2023-03-14

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

我的目标是能够在calculator html表单中输入一个数字，按calculation，让结果连续显示（不被擦除），直到进行另一次计算。

我的代码如下所示：

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>

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

共有2个答案

和弘博

2023-03-14

匿名用户

当您单击submit时，表单将被提交，这基本上是一个到服务器的重定向。

第一种解决方案是完全删除表单标记。

第二个解决方案是，如果你想保留你的表单，但是你需要通过使用Event.preventDefault（）阻止它提交

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

或者您可以使用type="按钮"而不是type="提交"。这样表格就不会提交，结果将被保留。

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>

卫俊誉

2023-03-14

我怀疑发生的是你的表格被提交了。HTML5

您可以通过将元素上的类型属性显式设置为按钮来解决此问题：

<代码>

以下是您进行此更改的代码：

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>

类似资料：

自动显示计算器的结果

我是机器人和爪哇的新手。我已经构建了一个计算器，当我输入3个输入时，我需要它来自动显示结果，但我不知道该怎么做。我将multiply添加到了一个文本视图（通过属性onclick），它可以工作，但我希望它能在textview中自动显示。
PHP平均计算器不能正确显示结果

我创建一个PHP计算器，需要使用以下类，然后打印出用户的名字和他们取得的平均分数。这是我到目前为止的代码，但是它没有正确显示，它说有丢失的参数和未定义的变量，但是我不确定我哪里出错了！错误消息：警告：在C:\Program Files（x86）\EasyHP-DevServer-14.1VC11\data\localweb\my portable Files\练习4\average中调用的stu
在Hibernate中按计算值排序结果

问题内容：我有一个具有ID，名称，胜利，games_played列的表Player。我将其映射到类Player。我想在Hibernate中执行以下查询（最好使用Criteria，如果无法使用Criteria，则HQL也会有所帮助）从玩家顺序中选择*（获胜/ games_played）我希望得到List 按他们的获胜率排序。感谢您的回答帕洛问题答案： Hibernate不支持order
每天计算/统计mysql结果

问题内容：可以说我有一个名为’ ‘的mysql表，具有以下值：我想生成一份报告，说明每天有多少只动物报名（我不在乎一天中的时间）。因此，我从上面的示例表中寻找的最终结果是：有没有一种方法可以在mysql中执行此操作，或者我需要使用另一种语言（如PHP）来计算总数吗？任何想法表示赞赏，谢谢问题答案：会给您您所追求的。
在着色器上计算归一化设备坐标会显示不同于在cpu上计算的结果

我已经创建了一个正投影相机，用于我简单的OpenGL2D渲染器。目前我有一个问题，当我在着色器上计算它们时，计算的归一化设备坐标是错误的，但当我在cpu上计算它们时，我得到了想要的结果。我使用以下公式创建了一个正投影矩阵：其中右=1280，左=0，上=0，下=720，zFar=1.0和zNear=-1.0。因此，如果我使用以下顶点位置创建一个矩形：它应该导致一个矩形填充整个屏幕。为了计算
我不知道如何显示我的计算结果

该程序允许用户以年数输入贷款金额和贷款期限。每月和总付款应以1/8的利率递增显示。到目前为止，我已经足够正确地计算出一个数量，但我不知道如何显示所有结果。我拍摄了以下问题的说明： http://imgur.com/s9JEbtu

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

共有2个答案

相关问答

相关文章

相关阅读

相关工具

相关文档