javascript简单计算器不返回值
[英]javascript simple calculator not returning value
问题描述
我正在使用一个简单的计算器表格，我正在尝试使用 javascript 来计算总数。 我已经引用了正确的来源和 ID，但是我会上传。
单击计算按钮时，页面会将值刷新回正常状态。
请参阅下面的 HTML 和 JS
function calculate() { 'use strict'; var total; var quantity = document.getElementsById('quantity').value; var unitPrice = document.getElementById('price').value; var theVat = document.getElementById('vat').value; var theDiscount = document.getElementById('discount').value; total = quantity * unitPrice; total = total + (total * theVat / 100) - (total * theDiscount / 100); total = total.toFixed(2); document.getElementById('total').value = "£" + total; return false; } function initCal() { 'use strict'; document.getElementById('theCalculatorForm').onsubmit = calculate; } window.onload = initCal;
<!doctype html> <html class="no-js" lang="en" dir="ltr"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Innovative Multimedia - Simple Calculator</title> <link rel="stylesheet" href="css/foundation.min.css"> <link rel="stylesheet" href="css/app.css"> </head> <body> <div class="container"> <div class="row columns text-center"> <h2>Innovative Multimedia - Introduction to JavaScript</h2> <p> In this application the user will enter the required details and the application will calculate the total cost.</p> </div> <div class="row"> <h3> Simple Calculator</h3> <form action="" method="post" id="theCalculatorForm"> <fieldset> <p>Use this form to calculate the order total.</p> <div><label for="quantity">Quantity</label><input type="number" name="quantity" id="quantity" value="1" min="1" required></div> <div><label for="price">Price Per Unit</label><input type="number" name="price" id="price" value="1.00" required></div> <div><label for="vat">VAT (%)</label><input type="number" name="vat" id="vat" value="17" required disabled></div> <div><label for="discount">Discount (%)</label><input type="number" name="discount" id="discount" value="10" required disabled></div> <div><label for="total">Total</label><input type="text" name="total" id="total" value="0" required disabled></div> <div><input type="submit" value="Calculate" id="submitCal"></div> </fieldset> </form> </div> </div> <script src="js/calculator.js"></script> <script src="js/jquery.js"></script> <script src="js/what-input.js"></script> <script src="js/foundation.js"></script> <script src="js/app.js"></script> </body> </html>
如果您需要什么，请询问。
2 个解决方案
解决方案1
0 2018-11-08 19:14:30
<form>我们使用它通过两种方法（post/get）发送数据，所以当你点击 Button 时计算所有值发送和页面刷新使用 div 例如不刷新网页
像这样用 div 替换表单标签
<div id="theCalculatorForm">
</div>
<!---- Your code after will be like this ------>
<div id="theCalculatorForm">
<fieldset>
<p>Use this form to calculate the order total.</p>
<div><label for="quantity">Quantity</label><input type="number" name="quantity" id="quantity" value="1" min="1" required></div>
<div><label for="price">Price Per Unit</label><input type="number" name="price" id="price" value="1.00" required></div>
<div><label for="vat">VAT (%)</label><input type="number" name="vat" id="vat" value="17" required disabled></div>
<div><label for="discount">Discount (%)</label><input type="number" name="discount" id="discount" value="10" required disabled></div>
<div><label for="total">Total</label><input type="text" name="total" id="total" value="0" required disabled></div>
<div><input type="submit" value="Calculate" id="submitCal"></div>
</fieldset>
</div>
解决方案2
0 2018-11-08 20:27:22
在您的计算函数中，采用一个事件参数并防止发生默认操作：
function calculate(event) {
event.preventDefault();
//other code will work
}
然后在您的通话中使用一个事件：
<button onclick="calculate(e)">Calculate</button>
它会起作用
简单的Java计算器
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.