Question

我正在关注JavaScript书籍的示例，并且遇到了其中一个不能正常工作的示例。它应该阻止html表单实际提交到calculate.php，而是使用JavaScript函数calculate（）来执行计算。目前，它正在提交表单而不是使用JavaScript函数。我的代码正如本书中的代码所示，我不确定为什么它无法正常工作。

以下是我正在使用的代码：calculator.html

<!DOCTYPE html>
<html>
    <head>
    <title>Calculator</title>
    <meta charset="UTF-8" lang="en">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>

    <div id="display">
        <p>Click To Show/Hide Calculator</p>
    </div>

    <form method="post" id="theForm" action="calculate.php">
        <fieldset>
            <legend>Calculate</legend>
            <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="text" name="price" id="price" value="1.00" required>
            </div>
            <div>
                <label for="tax">Tax Rate (%):</label>
                <input type="text" name="tax" id="tax" value="0.0" required>
            </div>
            <div>
                <label for="discount">Discount:</label>
                <input type="text" name="discount" id="discount" value="0.00" required>
            </div>
            <div>
                <label for="total">Total:</label>
                <input type="text" name="total" id="total" value="0.00">
            </div>
            <div>
                <input type="submit" value="Calculate" id="submit">
            </div>
        </fieldset>
    </form>

    <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.1.js"><\/script>')</script>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"></script>
    <script src="js/shopping.js"></script>
</body>

这是JavaScript：shopping.js

function calculate() {
'use strict';
var total;
var quantity = document.getElementById('quantity');
var price = document.getElementById('price');
var tax = document.getElementById('tax');
var discount = document.getElementById('discount');
total = quantity * price;
tax /= 100;
tax++;
total *= tax;
total -= discount;
total = total.toFixed(2);
document.getElemenyById('total').value = total;
return false;
}

function init() {
'use strict';
var theForm = document.getElementById('theForm');
theForm.onsubmit = calculate;
}
window.onload = init;

$(document).ready(function() {
    $("#display").click(function(){
       $("#theForm").toggle();
    });
});

Answer 1

您的表单标记需要提交：

<form method="post" id="theForm" action="calculate.php" onsubmit="return calculate()">

否则它不知道运行该功能。

编辑-------

道歉，我错过了你已经设定好了。无论如何，问题比这更容易。这样：

document.getElemenyById（'total'）。value = total;

应该是

document.getElementById（'total'）。value = total;

Chrome javascript控制台对于查找这些拼写错误问题非常有价值：

https://developers.google.com/chrome-developer-tools/docs/console

Answer 2

此函数document.getElementById返回元素，而不是元素的值。由于您提到jQuery的原因，您可以使用$('#id')代替，这也将返回元素，您可以使用val()方法获取元素的值，如下所示：

var quantity = $('#quantity').val();

JavaScript计算器不起作用

2 个答案: