javascript - 数组附加项未进行到结帐

Question

好吧，如果客户在下拉菜单中选择了 1 件礼物、1 件产品和英国，价格总计为 18.48 英镑，但是当他们输入某个邮政编码(列在数组中)时，价格应该额外增加 2.00 英镑总计为 20.48 英镑。但是当按下结帐时，它只会结转 18.48 英镑....这是因为数组没有添加到下面的总和公式中吗？

<script>
    function myFunction(pc) {
        var postcode_arr = ["ZE", "KW", "IV", "HS", "AB", "DD", "PH", "PA", "FK", "KY", "G", "BT", "IM", "GY", "JE", "EH", "ML", "KA"];
        var firsttwo = pc.substr(0, 2);
        firsttwo = firsttwo.toUpperCase();
        //alert(firsttwo);

        var a = postcode_arr.indexOf(firsttwo);
        if (a != -1) {
            var amt = parseFloat(document.getElementById("amount").value);
            amt += 2;
            document.getElementById("amount").value = amt;
        }

        document.getElementById("demo").innerHTML = a;
    }
</script>
<form action="https://secure-test.worldpay.com/wcc/purchase" method="post" name="BuyForm">
    <input type="hidden" name="instId" value="000000"><!-- The "instId" value "0000000" should be replaced with the Merchant's own installation Id -->
    <input type="hidden" name="cartId" value="abc123"><!-- This is a unique identifier for merchants use. Example: PRODUCT123 -->
    <input type="hidden" name="currency" value="GBP"><!-- Choose appropriate currency that you would like to use -->
    <input type="hidden" name="desc" value="">
    <input type="hidden" name="testMode" value="100">

    <script language="JavaScript">

        // The next two functions round numbers to numerical formatting. They do not need to be altered when adding or removing products.
        function roundOff(value, precision) {
            return places(value, 1, precision);
        }

        function places(X, M, N) {
            var T, S = new String(Math.round(X * Number("1e" + N)))

            while (S.length < M + N) S = '0' + S
            var y = S.substr(0, T = (S.length - N));
            if (N > 0) {
                y += '.' + S.substr(T, N);
            }

            return y;
        }

        // This function checks for empty quantities. It does not need to be altered when adding or removing products.
        function CheckNull(value) {
            if (value == "") {
                value = "0";
            }

            return value;
        }

        // This function defines the postage and packaging location. It does not need to be altered when adding or removing products.
        function typeOfCarriage(x, whereabouts) {
            console.log(whereabouts);
            x.carriage_amount.value = whereabouts;
        }

        // This function addeds the postage and packaging to the total price of the products. Add new postage rates here, and also edit further down the page to add them to the table.
        function calculate(x) {
            basicprice = calc(x);
            if (Number(basicprice) > 0) {
                console.log(basicprice);

                switch (x.carriage_amount.value) {
                    case "UK":
                        postage_and_packaging = 3.50;
                        break
                    case "US":
                        postage_and_packaging = 20.38;
                        break
                        // To add a new postage rate. Copy from here...
                    case "asia":
                        postage_and_packaging = 5.75;
                        break
                        // ...to here, and paste directly below. Change the case country, and the postage price. You will also need to add the postage option you have created further down the page.
                    default:
                        postage_and_packaging = 8.75;
                        break;
                }
                x.amount.value = basicprice + Number(postage_and_packaging);

            }
            else {
                x.amount.value = "0";
            }

            x.amount.value = roundOff(x.amount.value, 2);
        }

        // The standard price, exluding postage and packaging is calculated here. It does not need to be altered when adding or removing products. -->
        function calc(x) {
            x.amount.value = 0;
            var y = x.price.length;
            var z = x.qty.length;
            var a = Number(x.amount.value);
            var b, c;

            while (y > 0) {
                b = Number(CheckNull(x.price[y - 1].value));
                c = Number(CheckNull(x.qty[y - 1].value));
                a += (b * c);
                y--;
            }
            return a;
        }
    </script>

    <h1>Postage &amp; Packaging</h1>

    <!-- This table provides layout for the products listed. -->
    <table cellpadding="3" border="2" align="center">
        <tr>
            <td colspan="3"><b>Personal Message (Hand Written by Mr.F Himself)</b><input name="price" type="hidden" value="3.99"> - &pound;3.99</td>
        </tr>
        <tr>
            <td>Quantity: <input name="qty" size="3" value="0"></td>
        </tr>
        <tr>
            <td colspan="3"><b>195 x 295 Pixboard</b><input name="price" type="hidden" value="10.99"> - &pound;10.99</td>
        </tr>
        <tr>
            <td>Quantity: <input name="qty" size="3" value="1"></td>
        </tr>
    </table>

    <br><br>

    <div id="PM">
        <p> <b>Personal Message</b> </p>
        <p> (This will only be written if you've specified so above) </p>
        <p> You have a limit of 140 Characters </p>
        <input id="PMTB" type="text" rows="2" name="Personal Message" maxlength="140"><br>
    </div>

    <!-- This table is used as the total calculator and postage and packaging selector. -->
    <p>
        <div id="Select">
            <input name="carriage_amount" type="hidden" value="uk">
            <select name=postage_and_packaging onchange="typeOfCarriage(this.form,this.value);calculate(this.form)">
                <option selected value="">Please select country</option>

            </select>

    <p> <input name="calcButton" onclick="calculate(this.form)" type=button value="Calculate Total"> </p>
    <p>
        <b>Total: &pound; </b><input id="amount" name="amount" size=8 value="0">
    </p>

    </div>
    </p>
    <div id="Essentials">
        <p><b>Essentials</b></p>
        <table id="HV" align="center">
            <tr>
                <td>
                    <input type="checkbox" name="Free Pen" value="Free Pen"> Free Pen<br>

                    ( You will only recive this if Mr.F isnt writing your personal message )
                    <p></p>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" name="Horizontal" value="Horizontal"> Horizontal<br>
                </td>
            </tr>
            <tr>
                <td>
                    or
                </td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" name="Vertical" value="Vertical"> Vertical<br>
                </td>
            </tr>
        </table>
    </div>
    <div id="PDF">

        <b>Delivery Details</b>
        <p>
            <label>Full Name</label>
            <input type="text" name="Full Name" required>

        <p>
            <label>Mobile Number</label>
            <input type="text" name="Mobile Number">

        </p>
        <p>
            <label>Home Phone</label>
            <input type="text" name="Home Phone" required>

        </p>
        <p>
            <label>Email</label>
            <input type="text" name="Email" required>

        </p>

        <b>Home Address</b>
        <p>
            <label>Address</label>
            <input type="text" name="Address" required>
        <p>
            <label>Town</label>
            <input type="text" name="Town/City" required>
        </p>
        <p>
            <label>City</label>
            <input type="text" name="Town/City" required>
        </p>
        <p>
            <label>Country</label>
            <input type="text" name="Country" required>
        </p>
        <p>
            <b>Post Code</b><input name="postcode" type="text" required onblur="myFunction(this.value);">
        <p>
        </p>

        <b>Business Address</b>
        <p>
            <label>Address</label>
            <input type="text" name="Address">
        <p>
            <label>Town</label>
            <input type="text" name="Town/City">
        </p>
        <p>
            <label>City</label>
            <input type="text" name="Town/City">
        </p>
        <p>
            <label>Country</label>
            <input type="text" name="Country">
        </p>
        <p>
            <b>Post Code</b><input name="postcode" type="text" onblur="myFunction(this.value);">
        <p>
        </p>



        <b>Gift Address</b>
        <p>
            <label>Address</label>
            <input type="text" name="Address">
        <p>
            <label>Town</label>
            <input type="text" name="Town/City">
        </p>
        <p>
            <label>City</label>
            <input type="text" name="Town/City">
        </p>
        <p>
            <label>Country</label>
            <input type="text" name="Country">
        </p>
        <p>
            <b>Post Code</b><input name="postcode" type="text" onblur="myFunction(this.value);">
        <p>
        </p>

    </div>
    <center>
        <p><b>Dont forget to upload your image</b></p>
    </center>

    <!-- This generates a button that submits the information and send the user into the Worldpay payment pages. -->
    <p align="center"><input type=submit value=Checkout onclick="calculate(this.form)"></p>
</form>

Answer 1

很难理解这里发生的一切，但似乎 myFunction 只在 postcode 元素的模糊处被调用。这意味着必须先选择它，然后取消选择，这会触发模糊。我猜这个触发器不会发生。因此，您必须确保无论如何调用 myFunction，并使用邮政编码输入元素的当前值。