Javascript无法正常工作 - 帮助

时间：2010-01-29 04:14:27

标签： javascript 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Form Validation and Dynamic Forms</title>

<script type="text/javascript">
    window.onload = function() {

        document.getElementById('shipping1').onclick = calcShipping;
        document.getElementById('shipping2').onclick = calcShipping;
        document.getElementById('shipping3').onclick = calcShipping;

        document.getElementById('Text1').onblur = recalculate;
        document.getElementById('Text2').onblur = recalculate;
        document.getElementById('Text3').onblur = recalculate;




    }


    function calcShipping() {

        document.getElementById('shippingTbx').value = parseFloat(this.value).toFixed(2);
        recalculate();
    }


    function recalculate() {

        var prod1, prod2, prod3;
        var prod1$ = 1.5;
        var prod2$ = 2.25;
        var prod3$ = 3.45;

        var merchandise$ = 0;

        prod1 = parseInt(document.getElementById('Text1').value);
        prod2 = parseInt(document.getElementById('Text2').value);
        prod3 = parseInt(document.getElementById('Text3').value);

        if (!isNaN(prod1)) {
            merchandise$ += (prod1 * prod1$)
        }

        if (!isNaN(prod2)) {
            merchandise$ += (prod2 * prod2$)
        }

        if (!isNaN(prod3)) {
            merchandise$ += (prod3 * prod3$)
        }


        document.getElementById('merchTbx').value = parseFloat(merchandise$).toFixed(2);

        var shipping$ = parseFloat(document.getElementById('shippingTbx').value);

        var total$ = merchandise$;
        if (!isNaN(shipping$))
            total$ += shipping$;

        document.getElementById('totalTbx').value = parseFloat(total$).toFixed(2);


    }

</script>

<style type="text/css">
    body{
        background:
            #F4F0F4
            url(topleft.jpg)
            no-repeat
            top left;
        padding-right: 20px;
        padding-bottom: 50px;
        font: 0:8em Verdana, sans-serif;}

.row{width:98%; overflow:auto;}

div.header {width:20%; text-align:left;}

div.field { width:75%; text-align:left;}

.style1 {width: 367px}

    #Text1
    {
        width: 58px;
    }
    #Text2
    {
        width: 58px;
    }
    #Text3
    {
        width: 58px;
    }

</style>

</head>

<body >

<h2 style = "text-align:center;">Form Validation and Dynamic Forms</h2>
<table border="10" width="600" align="center" bgcolor="#DEB887">

<tr>
<td class="style1">

<form action= "thankupage.html">

    <fieldset>
    <legend>Product Information:</legend>
    <input type="checkbox" name="Product1" id="Checkbox1" value="yes" tabindex="1" /> Product 1 @ 1.50/unit
    <input id="Text1" type="text" /><br />
    <input type="checkbox" name="Product2" id="Checkbox2" value="yes" tabindex="2" /> Product 2 @ 2.25/unit
    <input id="Text2" type="text" /><br />
    <input type="checkbox" name="Product3" id="Checkbox3" value="yes" tabindex="3" /> Product 3 @ 3.45.unit
    <input id="Text3" type="text" /><br />
    </fieldset>

    <br />    

    <div align="left" style="width: 569px">  
     <fieldset id="Fieldset2" style="position: relative">
    <legend> Billing Address </legend>

    <div class="row">
        <div class="header">Last Name:</div>
        <div class="field"><input type="text" name="lname" tabindex="1" /></div>
    </div>
    <div class="row">
        <div class="header">First Name:</div>
        <div class="field"><input type="text" name="lname" tabindex="1" /></div>
    </div>
    <div class="row">
        <div class="header">Address:</div>
        <div class="field"><input type="text" name="address" tabindex="3" /></div>
    </div>
     <div class="row">
        <div class="header">City:</div>
        <div class="field"><input type="text" name="address" tabindex="3" /></div>
    </div>
     <div class="row">
        <div class="header">State:</div>
        <select name="State" id="Select1">
            <option value="-1"></option>
            <option value="73|0">Alabama</option>
            <option value="16|1">Alaska</option>
            <option value="70|0">Arizona</option>
            <option value="75|0">Arkansas</option>
            <option value="71|0">California</option>
            <option value="72|0">Colorado</option>
            <option value="67|0">Connecticut</option>
            <option value="69|0">Delaware</option>
            <option value="68|0">District of Columbia</option>
            <option value="65|0">Florida</option>
            <option value="66|0">Georgia</option>
            <option value="62|1">Hawaii</option>
            <option value="63|0">Idaho</option>
            <option value="58|0">Illinois</option>
            <option value="59|0">Indiana</option>
            <option value="60|0">Iowa</option>
            <option value="55|0">Kansas</option>
            <option value="56|0">Kentucky</option>
            <option value="57|0">Louisiana</option>
            <option value="52|0">Maine</option>
            <option value="50|0">Maryland</option>
            <option value="51|0">Massachusetts</option>
            <option value="47|0">Michigan</option>
            <option value="48|0">Minnesota</option>
            <option value="49|0">Mississippi</option>
            <option value="44|0">Missouri</option>
            <option value="45|0">Montana</option>
            <option value="46|0">Nebraska</option>
            <option value="41|0">Nevada</option>
            <option value="42|0">New Hampshire</option>
            <option value="43|0">New Jersey</option>
            <option value="38|0">New Mexico</option>
            <option value="39|0">New York</option>
            <option value="40|0">North Carolina</option>
            <option value="35|0">North Dakota</option>
            <option value="36|0">Ohio</option>
            <option value="37|0">Oklahoma</option>
            <option value="32|0">Oregon</option>
            <option value="34|0">Pennsylvania</option>
            <option value="30|0">Rhode Island</option>
            <option value="31|0">South Carolina</option>
            <option value="26|0">South Dakota</option>
            <option value="27|0">Tennessee</option>
            <option value="28|0">Texas</option>
            <option value="23|0">Utah</option>
            <option value="24|0">Vermont</option>
            <option value="25|0">Virginia</option>
            <option value="21|0">Washington</option>
            <option value="22|0">West Virginia</option>
            <option value="17|0">Wisconsin</option>
            <option value="18|0">Wyoming</option>
            <option value="-1">------------------------------------</option>
            <option value="19|2">Armed Forces Americas</option>
            <option value="14|2">Armed Forces Europe</option>
            <option value="15|2">Armed Forces Pacific</option>
            <option value="-1">------------------------------------</option>
            <option value="74|4">American Samoa</option>
            <option value="61|4">Guam</option>
            <option value="53|4">Marianas Islands</option>
            <option value="54|4">Marshall Islands</option>
            <option value="64|4">Micronesia</option>
            <option value="33|4">Palau</option>
            <option value="29|4">Puerto Rico</option>
            <option value="20|4">US Virgin Islands</option>
            <option value="-1">------------------------------------</option>
            <option value="11|3">Alberta</option>
            <option value="12|3">British Columbia</option>
            <option value="13|3">Manitoba</option>
            <option value="8|3">New Brunswick</option>
            <option value="9|3">Newfoundland</option>
            <option value="5|3">Northwest Territories</option>
            <option value="10|3">Nova Scotia</option>
            <option value="6|3">Nunavut</option>
            <option value="7|3">Ontario</option>
            <option value="2|3">Prince Edward Island</option>
            <option value="3|3">Quebec</option>
            <option value="4|3">Saskatchewan</option>
            <option value="1|3">Yukon</option>

        </select>

    </div>
     <div class="row">
        <div class="header">Zip:</div>
        <div class="field"><input type="text" name="address" tabindex="3" /></div>
    </div>
    <div class="row">
        <div class="header">Phone Number:</div>
        <div class="field"><input type="text" name="pnumber" /></div>
    </div>
     <div class="row">
        <div class="header">email:</div>
        <div class="field"><input type="text" name="address" tabindex="3" 
                style="width: 297px" /></div>
    </div>

</fieldset>
</div>

<br />

 <fieldset>
<legend> Billing Method </legend>
<input type="radio" onclick="javascript:setTimeout('__doPostBack(\'ctl00$mainContentPlaceHolder$shipMethodSelector$shipMethods$3\',\'\')', 0)" value="3.50" name="Saturday"
id="Radio1"/>
<label for="ctl00_mainContentPlaceHolder_shipMethodSelector_shipMethods_3">Saturday Delivery ($3.50)</label> <br />
<input type="radio" onclick="javascript:setTimeout('__doPostBack(\'ctl00$mainContentPlaceHolder$shipMethodSelector$shipMethods$3\',\'\')', 0)" value="5.00" name="Days"
id="Radio2"/>      
<label for="ctl00_mainContentPlaceHolder_shipMethodSelector_shipMethods_3">2-3 days Delivery ($5.00)</label> <br />
<input type="radio" onclick="javascript:setTimeout('__doPostBack(\'ctl00$mainContentPlaceHolder$shipMethodSelector$shipMethods$3\',\'\')', 0)" value="7.50" name="Overnight"
id="Radio3"/>      
Overnight<label for="ctl00_mainContentPlaceHolder_shipMethodSelector_shipMethods_3"> Delivery ($7.50)</label> 
</fieldset>

<br />

<fieldset>
    <legend>Order Summary</legend>
    <b> Merchandise: </b>: 
    <input id="Text4" type="text" /><br />
    Shipping charges: 
    <input id="Text5" type="text" /><br />
    Sales Tax: 
    <input id="Text6" type="text" /><br />
    <b> Order Total: </b>:&nbsp;
    <input id="Text7" type="text" /></fieldset>

<br />  

<fieldset>
    <legend>Pay with Credit Card</legend>
    <b> Card Type: </b>
    <select class="coField7 coFieldError" id="ctl00_mainContentPlaceHolder_creditCardPaymentSelector_currentCreditCard_creditCardList1" name="ctl00$mainContentPlaceHolder$creditCardPaymentSelector$currentCreditCard$creditCardList1">
                <option value="0">Select Card</option>
                <option value="3">Visa</option>
                <option value="4">Master Card</option>
                <option value="5">Discover</option>
                <option value="7">American Express</option>

            </select>
    <br />
    <b> Card Number: </b>: <input type="text" size="10" />
  </fieldset>

<input type="submit" value="Submit" />

<br /> 

</form>

</td>
</tr>
</table>

</body>
</html>

4 个答案:

答案 0 :(得分：0)

尝试将您的方法调用从window.onload移开。

window.onload = MyFunction;

function MyFunction() 
{
        document.getElementById('shipping1').onclick = calcShipping;
        document.getElementById('shipping2').onclick = calcShipping;
        document.getElementById('shipping3').onclick = calcShipping;

        document.getElementById('Text1').onblur = recalculate;
        document.getElementById('Text2').onblur = recalculate;
        document.getElementById('Text3').onblur = recalculate;
}

答案 1 :(得分：0)

简短回答：您似乎没有名为“shipping1”的文档中的任何元素。

更长的回答：你得到的错误表明行上的内容

document.getElementById('shipping1').onclick = calcShipping;

失败了。它不能是document，因为您不在using块中，如果文档可能为空则会非常奇怪。正在访问的下一个对象是getElementById（）为onclick槽返回的内容。由于在dcument中似乎没有任何具有该名称的元素，因此可以很好地猜测这会导致问题。

答案 2 :(得分：0)

修复您的单选按钮以便发货。你在javascript中称他们为'shipping1,2,3'，但在你的html中他们有错误的ID。同时删除他们的回发事件。

    <input type="radio" value="3.50" name="Saturday" 
id="Shipping1"/> 
<label for="Shipping1">Saturday Delivery ($3.50)</label> <br /> 
<input type="radio" value="5.00" name="Days" 
id="Shipping2"/>       
<label for="Shipping2">2-3 days Delivery ($5.00)</label> <br /> 
<input type="radio" value="7.50" name="Overnight" 
id="Shipping3"/>          
Overnight<label for="Shipping3"> Delivery ($7.50)</label>

干杯， 〜ck

答案 3 :(得分：0)

document.getElementById('shipping1')

以上代码为“null”，表示没有名称为“shipping1”的控件。

document.getElementById('Text1').onblur

这也会抛出“null”异常，因为在你给出的html中没有名为“shippingTbx”的控件。

function calcShipping() { 
    // Below code is null
    document.getElementById('shippingTbx').value = parseFloat(this.value).toFixed(2); 
    recalculate(); 
}

请确保您拥有所有控件并仅获取html中可用控件的元素。

相关问题
最新问题