Compatibilité onclick firefox

Compatibilité onclick firefox - HTML/CSS - Programmation

Marsh Posté le 11-06-2009 à 00:48:06    

Bonjour à tous,
 
voilà mon problème :  
 
Je voudrais  créer une simulation de système de caddie pour un site réalisé dans le cadre scolaire.
J'ai donc trouvé un code tout simple et qui répond exactement a ma demande.
 
<script type="text/javascript">  
 
<!-- function calculette ()  
 
{   var total=0;    
 
if (caddie.achat1.checked)     total += 100;  
 
 if (caddie.achat2.checked)     total += 94;    
 
if (caddie.achat3.checked)     total += 48;    
 
caddie.Total.value = total+" ?"; }  
 
-->  
 
</script>
 
avec le formulaire suivant :  
 
<form name="caddie">    
 
<label for"achat1">Produit 1</label>    
 
<input type="checkbox" name="achat1" id="achat1" value="0" OnClick="calculette()" />    
 
<label for"achat2">Produit 2</label>    
 
<input type="checkbox" name="achat2" id="achat2" value="0" OnClick="calculette()" />    
 
<label for"achat3">Produit 3</label>    
 
<input type="checkbox" name="achat3" id="achat3" value="0" OnClick="calculette()" />  
 
<input type="text" name="Total" readonly /> </form>  
 
 
Et voilà mon problème : ce script fonctionne nickel sous internet explorer mais rien sur firefox.
 
J'ai fait quelques recherches et apparement, c'est la commande onclick qui ne se gère pas sous firefox.
 
 
Quelqu'un aurait il une solution à le proposer, je galère
 
D'avance merci a tous

Reply

Marsh Posté le 11-06-2009 à 00:48:06   

Reply

Marsh Posté le 11-06-2009 à 01:03:58    

pour plus de clarté :  

Code :
  1. <script type="text/javascript">  
  2.  
  3. <!-- function calculette ()  
  4.  
  5. {   var total=0;    
  6.  
  7. if (caddie.achat1.checked)     total += 100;  
  8.  
  9.  if (caddie.achat2.checked)     total += 94;    
  10.  
  11. if (caddie.achat3.checked)     total += 48;    
  12.  
  13. caddie.Total.value = total+" ?"; }  
  14.  
  15. -->  
  16.  
  17. </script>


 
 

Code :
  1. <form name="caddie">     
  2.   
  3. <label for"achat1">Produit 1</label>     
  4.   
  5. <input type="checkbox" name="achat1" id="achat1" value="0" OnClick="calculette()" />     
  6.   
  7. <label for"achat2">Produit 2</label>     
  8.   
  9. <input type="checkbox" name="achat2" id="achat2" value="0" OnClick="calculette()" />     
  10.   
  11. <label for"achat3">Produit 3</label>     
  12.   
  13. <input type="checkbox" name="achat3" id="achat3" value="0" OnClick="calculette()" />   
  14.   
  15. <input type="text" name="Total" readonly /> </form>

Reply

Marsh Posté le 11-06-2009 à 09:22:41    

As-tu essayé en mettant onclick (sans majuscules) à la place de tes OnClick (pas très standards) ?

Reply

Marsh Posté le 11-06-2009 à 11:05:35    

+1 normalement c'est en minuscule: http://www.w3schools.com/htmldom/dom_obj_event.asp
 
mais ca fonctionne chez moi quand même.

Reply

Marsh Posté le 11-06-2009 à 11:16:41    

Testé, ça marche parfaitement sous ie 7.0.xx et firefox (3.0.10)... si on enlève les balises de commentaires dans la fonction js
<!--
et
-->
 
Je pense que tu t'en doutes, mais sait-on jamais...


Message édité par deliriumtremens le 11-06-2009 à 11:16:55
Reply

Marsh Posté le 11-06-2009 à 16:12:27    

j'ai donc testé les deux et ca ne fonctionne toujours pas sous ff (j'ai egalement la version 3.0.10, ca fonctionne che vous tous?
 
J'ai la developper bar et j'ai bien regardé, mon js est activé....
 
le mystère reste entier comme le lait du même nom
 
Merci d'avoir jeté un oeil

Reply

Marsh Posté le 11-06-2009 à 20:44:05    

Nan, c'est le script calculette() qui est pourri. Sans préfixe, FF cherche les objets reférencé dans l'objet "window". "caddie" se trouve dans document, il faut donc le préciser :
 

Code :
  1. <script type="text/javascript">  
  2. function calculette ()  
  3. {
  4.     var total=0
  5.  
  6.     if (document.caddie.achat1.checked)     total += 100;  
  7.     if (document.caddie.achat2.checked)     total += 94;    
  8.     if (document.caddie.achat3.checked)     total += 48;    
  9.  
  10.     document.caddie.Total.value = total+" ?"
  11. }
  12. </script>

Reply

Marsh Posté le 12-06-2009 à 10:11:52    

faudra pas utiliser getElementById pour être plus correct?


Message édité par pataluc le 12-06-2009 à 10:13:04
Reply

Marsh Posté le 12-06-2009 à 10:50:23    

En effet ;)


---------------
We deserve everything that's coming...
Reply

Marsh Posté le 12-06-2009 à 12:51:00    

D'abord, merci a tous de vous concentrer sur mon probleme, ca fait plaisir :)
 
J'ai donc testé en ajoutant document. comme tpierron l'a suggéré, pour le même résultat, mon addition n'apparaît toujours pas.
 
J'suis en train de tester avec un getElementById mais comme j'suis une bille en js, j'ai un peu de mal, je vous tient au courant.
 
Encore merci a tous

Message cité 1 fois
Reply

Marsh Posté le 12-06-2009 à 12:51:00   

Reply

Marsh Posté le 12-06-2009 à 13:16:46    

bonjour,
ça fonctionne parfaitement avec FF,
même avec les quelques erreurs html
 
<body>
 <script type="text/javascript">  
  function calculette ()  
  {   var total=0;    
   if (caddie.achat1.checked)     total += 100;  
   if (caddie.achat2.checked)     total += 94;    
   if (caddie.achat3.checked)     total += 48;    
   caddie.Total.value = total+" ?";  
  }  
 </script>  
      <form name="caddie">    
   <label for="achat1">Produit 1</label>    
   <input type="checkbox" name="achat1" id="achat1" value="0" OnClick="calculette()" />    
   <label for="achat2">Produit 2</label>    
   <input type="checkbox" name="achat2" id="achat2" value="0" OnClick="calculette()" />    
   <label for="achat3">Produit 3</label>    
   <input type="checkbox" name="achat3" id="achat3" value="0" OnClick="calculette()" />  
   <input type="text" name="Total" readonly />  
  </form>
</body>
 
@+

Reply

Marsh Posté le 12-06-2009 à 13:18:04    

et FF préfèreras :
document.caddie.achat1.checked...et les autres
document.caddie.Total.value = total+" ?";  

Reply

Marsh Posté le 12-06-2009 à 15:18:07    

coldvibe a écrit :

J'ai donc testé en ajoutant document. comme tpierron l'a suggéré, pour le même résultat, mon addition n'apparaît toujours pas.


 
C'est quoi l'erreur affiché dans la console javascript (Ctrl+Shift+J sous FF) ? Chais_moi_ça_marche™

Reply

Marsh Posté le 12-06-2009 à 15:23:32    

Hello a tous
 
voila, j'ai combiné le code de bul_3, le document. de tpierron et le onclick sans majuscules de kristov et tou fonctionne sous firefox
 
voici donc mon code final :  
 

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  5. <title>Document sans nom</title> 
  6.  <script type="text/javascript">   
  7.   function calculette ()   
  8.   {   var total=0;     
  9.    if (document.caddie.achat1.checked)     total += 100;   
  10.    if (document.caddie.achat2.checked)     total += 94;     
  11.    if (document.caddie.achat3.checked)     total += 48;     
  12.    document.caddie.Total.value = total+" ";   
  13.   }   
  14.  </script>  
  15.  
  16. </head> 
  17.  
  18. <body> 
  19.  
  20.   
  21.       <form name="caddie">     
  22.    <label for="achat1">Produit 1</label>     
  23.    <input type="checkbox" name="achat1" id="achat1" value="0" onclick="calculette()" />     
  24.    <label for="achat2">Produit 2</label>     
  25.    <input type="checkbox" name="achat2" id="achat2" value="0" onclick="calculette()" />     
  26.    <label for="achat3">Produit 3</label>     
  27.    <input type="checkbox" name="achat3" id="achat3" value="0" onclick="calculette()" />   
  28.    <input type="text" name="Total" readonly />   
  29.   </form> 
  30. </body> 
  31. </html>


 
un grand merci à tous :)

Reply

Marsh Posté le 12-06-2009 à 18:03:38    

Arf, effectivement, j'avais un DOCTYPE HTML 4.0 dans mon test, qui n'est pas sensible à la casse, alors qu'en XHTML, ça l'est.

Reply

Marsh Posté le 12-06-2009 à 19:24:16    

Code :
  1. <input type="text" name="Total" readonly />


est incorrect, readonly doit avoir une valeur :

Code :
  1. <input type="text" name="Total" readonly="readonly" />

;) et +1 pour l'utilisation de getElementById :
 

Code :
  1. function calculette ()  
  2.  {   var total=0;    
  3.    if (document.getElementById('achat1').checked)     total += 100;  
  4.    if (document.getElementById('achat2').checked)     total += 94;    
  5.    if (document.getElementById('achat3').checked)     total += 48;    
  6.    document.getElementById('Total').value = total+" ";  
  7.  }


Message édité par Profil supprimé le 12-06-2009 à 19:24:38
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed