问题描述
我是 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>
有关如何修复此代码的任何建议? 感谢您花时间阅读这篇文章,非常感谢您的帮助!
解决方法
我怀疑正在发生的事情是您的表单正在提交。 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(),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>
当您点击提交时,表单正在提交,这基本上是重定向到服务器。
第一个解决方案是完全删除表单标签。
第二种解决方案是,如果您想保留您的表单,但是您需要使用 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(),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>