JavaScript计算器无法正常工作

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

您的表单标签需要onsubmit：

<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 个解决方案

解决方案1
0 已采纳 2013-11-24 22:32:45

解决方案2
0 2013-11-24 22:35:23

JavaScript计算器无法正常工作

问题描述

2 个解决方案

解决方案1 0 已采纳 2013-11-24 22:32:45

解决方案2 0 2013-11-24 22:35:23

解决方案1
0 已采纳 2013-11-24 22:32:45

解决方案2
0 2013-11-24 22:35:23