使用javascript自动计算

Auto calculation using javascript

本文关键字：计算 javascript 使用更新时间：2023-09-26

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            var form = document.forms.myform,
                    qty = form.qty,
                    cost = form.cost,
                    output = form.textbox;
            window.calculate = function () {
                var q = parseInt(qty.value, 10) || 0,
                        c = parseFloat(cost.value) || 0;
                output.value = (q * c).toFixed(2);
            };
        </script>
    </head>
    <body>
        <form action="caltest.php" method="post" name="myform" onkeyup="calculate()">
            <label>Num of PAX :</label>
            <input type="text" name="qty" />
            <input type="hidden" name="cost" value="700" />
            <br/>
            <lable>Total Price: </lable>
            <input type="text" name="textbox" />
        </form>
    </body>
</html>

我正在做一个简单的计算。没有得到任何输出。

执行var form = document.forms.myform时，没有<form name="myform"...还。
最简单(尽管可能不是最复杂的(解决方案是将<script>块从<head>移动到表单代码之后。

试试这个正在工作

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <form action="caltest.php" method="post" name="myform" onkeyup="calculate()" >
            <label>Num of PAX :</label>
            <input type="text" name="qty" />
            <input type="hidden" name="cost" value="700" />
            <br/>
            <lable>Total Price: </lable>
            <input type="text" name="textbox" />
      </form>    
      <script>
            var form = document.forms.myform,
                    qty = form.qty,
                    cost = form.cost,
                    output = form.textbox;
            window.calculate = function () {
                var q = parseInt(qty.value, 10) || 0,
                        c = parseFloat(cost.value) || 0;
                output.value = (q * c).toFixed(2);
            };
        </script>
    </body>
</html>