Question

我正在使用一个简单的计算器表格，并且我正在尝试使用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>

如果您需要任何东西，请询问。

Answer 1

<form>我们使用它通过两种方法（发布/获取）发送数据，因此当您单击在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>

Answer 2

在您的calculate函数中，采用一个事件参数并防止发生默认操作：

function calculate(event) {
    event.preventDefault();

    //other code will work 
}

然后在通话中使用事件：

<button onclick="calculate(e)">Calculate</button>

它将起作用

javascript简单计算器不返回值

2 个答案: