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>

來源

2010-01-29 Yves

將上面顯示的代碼格式化，然後提出問題。 – 2010-01-29 04:17:14

您能告訴我們更多關於您正在獲取的錯誤以及您到目前爲止已調試到什麼程度的信息嗎？ – 2010-01-29 04:18:43

首先感謝您重新格式化。我得到這個錯誤ON LOAD： Line：10 錯誤：'document.getElementById（...）'爲空或不是對象 – Yves 2010-01-29 04:22:17

嘗試將您的方法調用從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; 
}

來源

2010-01-29 04:23:19

簡短回答：您似乎在名爲「shipping1」的文檔中沒有任何元素。

較長的答案：你得到的錯誤指示就行了

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

失敗的東西。它不能是document，因爲你不在using區塊中，並且如果文檔可能爲空將會非常奇怪。下一個被訪問的對象是getElementById（）爲onclick槽返回的內容。由於在該部分中似乎沒有任何具有該名稱的元素，所以這是一個非常好的猜測，那是造成這個問題的原因。

來源

2010-01-29 04:52:31 atk

修復用於裝運的單選按鈕。您在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

來源

2010-01-29 05:01:08 Hcabnettek

document.getElementById('shipping1')

上面的代碼是「零」，意味着有一個名爲「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中可用控件的元素。

來源

2010-01-29 05:16:18 superachu

Javascript無法使用 - 幫助

回答

相關問題