Fatal编程技术网

JavaScript计算器不工作

javascript jquery html

JavaScript计算器不工作,javascript,jquery,html,Javascript,Jquery,Html,下面是一本JavaScript书籍的示例，我遇到了一个无法正常工作的示例。它应该防止html表单实际提交到calculate.php，而是使用JavaScript函数calculate（）来执行计算。目前，它正在提交表单，而不是使用JavaScript函数。我的代码就是书中的代码，我不知道为什么它不能正常工作 下面是我正在使用的代码：calculator.html <!DOCTYPE html> <html> <head> <title&

下面是一本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>
您的表单标签需要onsubmit：

<form method="post" id="theForm" action="calculate.php" onsubmit="return calculate()">
否则它不知道如何运行该函数

编辑-------

抱歉，我错过了你已经准备好的。无论如何，问题比那容易。这：

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

应该是

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

Chrome javascript控制台对于发现这些类型的键入问题非常有价值：

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

var quantity = $('#quantity').val();
如果那本书真的建议你把jQuery调用和普通DOM操作混合在一起，我会找另一本书。不管怎样，有什么事情发生了吗？您是否尝试添加
console.log（）
消息以确保函数正在被调用？您是否已检查控制台是否存在可能的错误？您现在得到的代码不必要地导入jQuery库两次，这不会造成任何伤害，但没有必要。抱歉，我错过了。无论如何，问题比那容易。这是：document.getElemenyById（'total'）。value=total；应该是document.getElementById（'total'）。value=total；谢谢Keith，我觉得很遗憾这只是个打字错误哈哈 
var quantity = $('#quantity').val();