Javascript ne fonctionne pas - aide

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

Source

2010-01-29 Yves

format compatible avec votre code ci-dessus, puis poser une question .. –

Pouvez-vous nous en dire plus sur l'erreur que vous obtenez et à quel point vous avez débogué jusqu'à présent? –

d'abord merci pour le reformatage. Je reçois cette erreur ON LOAD: Ligne: 10 Erreur: 'document.getElementById (...)' est null ou un objet – Yves

Essayez de déplacer votre appel de méthode loin de votre 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; 
}

Source

2010-01-29 04:23:19

Réponse courte: vous ne semblez avoir aucun élément dans le document nommé "shipping1".

réponse plus longue: L'erreur que vous obtenez est indiquant que quelque chose sur la ligne

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

est un échec. Il ne peut pas être document puisque vous n'êtes pas dans un bloc using et il serait très étrange si le document pourrait être nulle. L'objet suivant accédé est ce qui est retourné par getElementById() pour le slot onclick. Comme il ne semble pas être un élément avec ce nom dans le dcument, il est une assez bonne supposition que ce la cause du problème.

Source

2010-01-29 04:52:31 atk

Fixez vos boutons radio pour l'expédition. Vous les appelez 'shipping1,2,3' en javascript, mais dans votre code HTML, ils ont les mauvais ID. Supprimez également leur événement de publication.

<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

Source

2010-01-29 05:01:08 Hcabnettek

document.getElementById('shipping1')

code ci-dessus est "nul", signifie qu'il n'y a pas de contrôle avec le nom "shipping1".

document.getElementById('Text1').onblur

Cette exception soulève également « null » car il n'y a pas de contrôle avec le nom « shippingTbx » dans le code HTML que vous avez donné.

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

Veuillez vous assurer que vous avez tous les contrôles et obtenez l'élément uniquement pour les contrôles disponibles dans le code HTML.

Source

2010-01-29 05:16:18 superachu

Javascript ne fonctionne pas - aide

Répondre

Questions connexes