开发者

Javascript is not working - help

开发者 https://www.devze.com 2022-12-18 05:45 出处：网络
<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
相关专题：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|开发者_Go百科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>

Try moving your method call away from your 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;
}

Short answer: you don't appear to have any element in the document named "shipping1".

Longer answer: The error you're getting is indicating that something on the line

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

is failing. It can't be document since you're not in a using block and it would be very strange if document could be null. The next object being accessed is whatever is returned by getElementById() for the onclick slot. Since there doesn't appear to be any element with that name in the dcument, it's a pretty good guess that that's causing the problem.

Fix your Radio buttons for shipping. You're calling them 'shipping1,2,3' in javascript, but in your html they have the wrong ID's. Also remove their postback event.

    <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>

Cheers, ~ck 

document.getElementById('shipping1')

Above code is "null", means there is no control with the name "shipping1".

document.getElementById('Text1').onblur

This also throws "null" exception as there is no control with the name "shippingTbx" in the html you gave.

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

Please make sure you've all the controls and get the element only for the controls available in the html.

0

上一篇:

:下一篇

更多 问答 相关资讯：

精彩评论

暂无评论...
登录 注册
Qedev.com
验证码 换一张
取 消

    关注公众号

    热门标签

    图文推荐

    Delphi - Custom drawing a message list

    Delphi - Custom drawing a message list
    C++ header-only include pattern

    C++ header-only include pattern
    IE7 Margin Collapses Into Padding

    IE7 Margin Collapses Into Padding
    in CoffeeScript, how can I use a variable as a key in a hash?

    in CoffeeScript, how can I use a variable as a key in a hash?
    Interactive visualization of a graph in python [closed]

    Interactive visualization of a graph in python [closed]
    How to customise PHP MYSQL tables?

    How to customise PHP MYSQL tables?
    High quality, simple random password generator

    High quality, simple random password generator
    Image Recognition ApI in android

    Image Recognition ApI in android

    开发者开发者网给大家分享系统运维,大数据运维,云计算,编程开发技巧,路由交换,运维和开发相关的资讯及技术文章，同时StackOverflow中文社区，知识经验交流分享。

    法律声明：本站内容均为网友上传，网站举办方负责审核和监督，如存在版权或非法内容，欢迎举报，我们将尽快予以删除。邮箱：devze@qq.com

    Copyright © 2018-2020 开发者. All rights reserved. Powered by 开发者ICP备案号: 京ICP备10032868号-9