Question

我目前有一个分配来获取一些变量并将它们放在一个基于表单的计算器中，该计算器将信息传递给javascript，然后在计算后更新。我使用本书中的示例将表单放在一起，但是当我单击按钮将信息发送到Javascript时，我只是得到一个页面，上面写着“没有收到数据”。我看了几个小时，但我不知道到底发生了什么。

HTML：

<!doctype html>
<html lang="en">
<head>
    <title>Paycheck Calculator</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
    <form action="" method="post" id="theForm">
        <fieldset>
            <p>Use this form to calculate your paycheck.</p>                                                     
            <div><label for="hours">Hours Worked</label><input type="text" name="hours" id="hours" value="0.00"></div>
            <div><label for="rate">Pay Rate</label><input type="text" name="rate" id="rate" value="0.00"></div>
            <div><label for="withholding">Withholding</label><input type="text" name="withholding" id="withholding" value="0.20"></div>
            <div><label for="total">Total</label><input type="text" name="total" id="total" value="0.00"></div>
            <div><label for="withheld">Withheld</label><input type="text" name="withhheld" id="withheld" value="0"></div>
            <div><label for="realTotal">Final Total</label><input type="text" name="realTotal" id="realTotal" value="0"></div>
            <div><input type="submit" value="Calculate" id="submit"/></div>
        </fieldset>
    </form>
    <script src="js/paycheck.js"></script>
</body>
</html>

使用Javascript：

function calculate() {
    'use strict';
    var totalPay;
    var withheld;
    var realPay;
    var hours = document.getElementById('hours').value;
    var rate = document.getElementById('rate').value;
    var withholding = document.getElementById('withholding').value;

    totalPay = hours * rate;
    withheld = totalPay * withholding;
    realPay = totalPay - withheld;

    document.getElementbyId('total').value = totalPay;
    document.getElementById('withheld').value = withheld;
    document.getElementById('realTotal').value = realPay;

    return false;
}

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

它与教科书的例子几乎没什么不同，出于某种原因他们的作品和我的作品没有。这让我疯狂！请告诉我这是明显和愚蠢的事情。

Answer 1

您的代码中出现了大小写错误。假设您正确运行init()，则只需更改此行：

document.getElementbyId('total').value = totalPay;

对此：

document.getElementById('total').value = totalPay;

即，将getElement b 更改为getElement B yId

使用JSFiddle：http://jsfiddle.net/5L4478br/

Answer 2

你必须在某处调用init()，
document.getElementbyId('total').value = totalPay;您的错误必须为document.getElementById('total').value = totalPay;且资金为B。

HTML

<!doctype html>
<html lang="en">
<head>
    <title>Paycheck Calculator</title>
    <meta charset="utf-8">
</head>
<body>
    <form action="" method="post" id="theForm" >
        <fieldset>
            <p>Use this form to calculate your paycheck.</p>                                                     
            <div><label for="hours">Hours Worked</label><input type="text" name="hours" id="hours" value="0.00"></div>
            <div><label for="rate">Pay Rate</label><input type="text" name="rate" id="rate" value="0.00"></div>
            <div><label for="withholding">Withholding</label><input type="text" name="withholding" id="withholding" value="0.20"></div>
            <div><label for="total">Total</label><input type="text" name="total" id="total" value="0.00"></div>
            <div><label for="withheld">Withheld</label><input type="text" name="withhheld" id="withheld" value="0"></div>
            <div><label for="realTotal">Final Total</label><input type="text" name="realTotal" id="realTotal" value="0"></div>
            <div><input type="submit" value="Calculate" id="submit"/></div>
        </fieldset>
    </form>
    <script type="text/javascript">

      function calculate () {
        'use strict';
        console.log ("starting calculate");
        var totalPay;
        var withheld;
        var realPay;
        var hours = document.getElementById('hours').value;
        var rate = document.getElementById('rate').value;
        var withholding = document.getElementById('withholding').value;

        totalPay = hours * rate;
        withheld = totalPay * withholding;
        realPay = totalPay - withheld;

        document.getElementById('total').value = totalPay;
        document.getElementById('withheld').value = withheld;
        document.getElementById('realTotal').value = realPay;


        console.log ("calculate finished");
        return false;
      }

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

        console.log ("inited");
      }

      console.log ("ready");
      init();
    </script>
</body>
</html>

HTML表单未提交，

2 个答案: