intégration de script

**pm2989** · 19/01/2011, 09h38

Bonjour, je suis actuellement stagiaire dans une entreprise de création web.
Mon projet est de faire un petit frère au site deja existant en reprenant des outils présents sur le site actuel.
(calculatrices financières en javascript)

J'ai un bon nombre de calculatrices a intégrer, jusque là ça allait.
Mais là FireFox me met :
dès que je tape un chiffre dans le formulaire, et une fois que je clique sur calculer il ne m'affiche rien à pare un message d'erreur semblable sur FireBug.
(Ca marche a peu près sous IE, enfin le calcul se fait :O)
J'ai essayé de mettre le code de la calculatrice a part pour faire un include dans ma page par la suite, si je vais sur la page ou j'ai mis le code de la calcu, ça fonctionne, mais sur la page ou j'include le tout , non.

voici mon code : Javascript

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
 
 
<script>
var run=0;
 
 function format(valeur,decimal,separateur) {
 
	var deci=Math.round( Math.pow(10,decimal)*(valeur-Math.floor(valeur)) );
	var val=Math.abs(Math.floor(valeur));
	if ((decimal==0)||(deci==Math.pow(10,decimal))) {val=Math.abs(Math.round(valeur)); deci=0;}
	var val_format=val+"";
	var nb=val_format.length;
	for (var i=1;i<4;i++) {
		if (val>=Math.pow(10,(3*i))) {
			val_format=val_format.substring(0,nb-(3*i))+separateur+val_format.substring(nb-(3*i));
		}
	}
	if (decimal>0) {
		if (deci>0) {
			deci=deci.toString();
		} else {
			deci="";
			for (var j=0;j<decimal;j++) deci+="0";
		}
		val_format=val_format+"."+deci.substring(0); 
	}
	if (parseFloat(valeur)<0) {val_format="-"+val_format;}
	return val_format;
}
 
 function fonction_calcul(fonction) {
 
     if(fonction == "=")
     {
		//CALCUL
       	var somme = 0;
       	var periode = 0;
       	var taux = 0;
		var rez;
 
    	somme = eval(window.document.calculatrice.somme.value);
     	periode = eval(window.document.calculatrice.periode.value);
     	taux = eval(window.document.calculatrice.taux.value);
 
     	somme = somme*Math.pow((1+(taux/100)),periode);
 
	var deci = 2;
 
	rez = format(somme,deci," ");
 
	if(document.calculatrice.somme.value!="" && document.calculatrice.taux.value!="" && document.calculatrice.periode.value!="")
	{
	    var doc11 = document.getElementById("tax");
	    doc11.style.visibility = 'visible';    
	    var tbody3=document.createElement("TBODY")
		var thead3=doc11.createTHead();
		var tfoot3=doc11.createTFoot();
		var tcaption3=doc11.createCaption();
		var br=document.createElement('br');
		var tr2=document.createElement("TR");
		var td1=document.createElement("TD");	
		td1.appendChild(document.createTextNode("La valeur acquise est de " + rez+ " Euros"));
		td1.style.textAlign="center";
 
	    td1.style.fontSize="16px";   
		tr2.appendChild(td1);
	    tr2.appendChild(br);
 
		thead3.appendChild(tr2);
 
		doc11.appendChild(thead3);
		doc11.appendChild(tfoot3);	  
    }
 
	this.run=1;
 
	}
	else
	{
		alert("Vous avez oublié de remplir certains champs...");
	}
}
 
 
function check_somme()
{
	reg = new RegExp('[^0-9.,]+', 'g');
	valeur = document.calculatrice.somme.value;
	if(reg.test(valeur)){
		document.calculatrice.somme.value=document.calculatrice.somme.value.replace(/[^0-9.,]+/, '');
		alert('Ce champ doit comporter uniquement des chiffres.');}
	return true;
} 
 
function check_taux()
{
	reg = new RegExp('[^0-9.,]+', 'g');
	valeur = document.calculatrice.taux.value;
	if(reg.test(valeur)){
		document.calculatrice.taux.value=document.calculatrice.taux.value.replace(/[^0-9.,]+/, '');
		alert('Ce champ doit comporter uniquement des chiffres.');}
	return true;
} 
 
function check_periode()
{
	reg = new RegExp('[^0-9]+', 'g');
	valeur = document.calculatrice.periode.value;
	if(reg.test(valeur)){
		document.calculatrice.periode.value=document.calculatrice.periode.value.replace(/[^0-9]+/, '');
		alert('Ce champ doit comporter uniquement des chiffres.');}
	return true;
} 
 
function DeleteTable(){
 
	 if(this.run!=1) {	
		this.fonction_calcul('=');
	} else{
		var element = document.getElementById('tax');	
		while (element.firstChild) {
			element.removeChild(element.firstChild);
		}
		this.run=0;
		this.fonction_calcul('=');
	}
}	
 
 
 
</script>

Et voici mon formulaire :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
 
   <!-- DEBUT TABLE DES CADRES -->
					    <table  border="0" cellpadding="6" cellspacing="6">			
			<!-- PREMIERE LIGNE DU TABLEAU CONTENANT LES 2 CADRES -->
                         <tr valign="top">	
			<!-- PREMIER CADRE -->
						   <td>
   								<table width="500" border="0" cellpadding="3" cellspacing="0">
 
                                    <tr style="bgcolor=#ffffff" >
                                      <td id="tdMilieuGauche">&nbsp;</td>
                                       <td valign="top">
                                          <table class="contenu" border="0" cellpadding="0" cellspacing="0" width="100%">
                                             <tr>
                                                <td valign="top">
                                                   <table border="0" width="100%">
                        <tr align="center">
                          <td valign="top"> <h1><span class="soustitreorange">Calcul de la valeur acquise d une somme placée</span></h1></br></td></tr>
 
                  <tr><td><br />      
                   <p><div class="menubleu"><img src="../images/puces/puce fleche points.bmp" alt=""/><b> Remplir les champs *</b></p>
<form name="calculatrice" action="";">
<TABLE BORDER = "0">
	<tr>
		<td>
			<p align="right"><B>Montant initial placé * :</B>
		</td>
		<TD>   
			<input type="text" name="somme" align="right" class="affiche" onkeyup="check_somme()" size="20"> 
    		</td>
	</tr>
	<tr><td>
		<p align="right">
			<B>Taux annuel en % * :</B></td>
	<td>
			<input type="text" name="taux" align="right" class="affiche" onkeyup="check_taux()" size="20"> 
      </td>
      </tr>
	<tr>
		<td>
			<p align="right"><B>Dur&eacute;e en Année * :</B>
   		</td>
		<td>
			<input type="text" name="periode" align="right" class="affiche" onkeyup="check_periode()" size="20"> 
		</td>
	</tr>
 
</table>
<div id="divPrincipale" align="center" style="text-align:center">
<table style="width:100%" cellpadding="8 px"border="0" >
     <tr align="center">
		<td colspan=2>
            <INPUT style="margin-top:0px;" TYPE="button" VALUE="Calculer" onClick="DeleteTable()">&nbsp;
            <INPUT TYPE="reset" VALUE="Effacer">
        </td>
    </tr>
    <tr align="center">
        <td>
            <table cellspacing="3px" cellpadding="0px"  style="visibility:hidden;border: 2px solid #165986" id="tax"></table>
        </td>
    </tr>
    <tr align="center">
        <td>
            <table style="visibility:hidden" id="result" border="1"></table>
            <table style="visibility:hidden" id="result2" border="0"></table>
        </td>
    </tr>
</table>
</div>
</div>
</FORM>                         
                  </td>
                        </tr>
						   </tr>
							</table>
                                                </td>
                                             </td>
											 </tr>
											  <tr align="right">
												<td style="petitgris"><a href="/calculatrices/avertissementcalculs.html" onclick="window.open(this.href, 'avertissement', 'height=200, width=400, top=800, left=800, toolbar=no, menubar=no, location=no, resizable=yes, scrollbars=no, status=no'); return false;">Avertissements sur le calcul</a>
												</td>
											</tr>
  </table>
                                       </td>
 
                                    </tr>
 
                                 </table>
                              </td>
			   <!--  FIN DU PREMIER CADRE DEBUT DU DEUXIEME  -->
 
   <!--  FIN DU DEUXIEME CADRE  -->
                            </tr>
   <!--                 FIN PREMIERE LIGNE DU TABLEAU CONTENANT LES 2 CADRES                   -->
 
 
                        </table>

Merci de m'aider,
Cordialement

Pierre

**RomainVALERI** · 19/01/2011, 10h46

Salut et bienvenue à toi

J'avoue ne pas avoir saisi de quel message d'erreur tu parles : tu peux détailler ? Quel est le problème observé au moment du clic sur "calculer" ?

Mais avant même de répondre à ta question, je ne peux pas m'empêcher de remarquer ceci :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function check_somme()
{
	reg = new RegExp('[^0-9.,]+', 'g');
	valeur = document.calculatrice.somme.value;
	if(reg.test(valeur)){
		document.calculatrice.somme.value=document.calculatrice.somme.value.replace(/[^0-9.,]+/, '');
		alert('Ce champ doit comporter uniquement des chiffres.');}
	return true;
} 
 
function check_taux()
{
	reg = new RegExp('[^0-9.,]+', 'g');
	valeur = document.calculatrice.taux.value;
	if(reg.test(valeur)){
		document.calculatrice.taux.value=document.calculatrice.taux.value.replace(/[^0-9.,]+/, '');
		alert('Ce champ doit comporter uniquement des chiffres.');}
	return true;
}

...ça donne *un peu* envie de refactoriser

> utilisation de paramètre plutot que copier-coller en dur dans le code

> deux variables déclarées mais non utilisées ?

("valeur" non utilisé, et "reg" est utilisé une fois, mais à la ligne suivante, on répète le littéral au lieu d'utiliser la variable existante...)
> pas de "var" devant les déclarations

> oubli (?) du "return false;"

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
function check(inp) {
   var reg = new RegExp('[^0-9.,]+', 'g');
   var valeur = document.forms["calculatrice"].inputs[inp].value;
   if(reg.test(valeur)) {
      valeur = valeur.replace(reg, '');
      alert('Ce champ doit comporter uniquement des chiffres.');
      return false;
   }
   return true;
}

(et il n'y a presque rien à rajouter pour intégrer check_periode avec ^^) (mais ne pas oublier d'adapter les appels de fonction pour ajouter le nom du champ à tester, comme "somme" par exemple)

Autre chose : pourquoi "eval" ici ?

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

somme = eval(window.document.calculatrice.somme.value);

Enfin : toute nue la balise script ?

une petite propriété "type" ne lui fera pas de mal

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<script type="text/javascript">...</script>

**pm2989** · 19/01/2011, 12h11

Merci de ta réponse, j'ai complété et factorisé comme tu l'as indiqué.

Le code erreur indiqué dans firebug est : document.calculatrice.periode is undefined

Si je tape du texte dans periode, si je tape dans les autres champs ca me mettra , doc.calcu. PERIODE ou SOMME et quand j'appuie sur calculer ça donne ceci :
window.document.calculatrice.somme is undefined

Et j'ai pas trop saisi le soucis de déclaration que tu as mis en évidence ?

Invité · 19/01/2011, 12h24

je vient d'essayer le script et il marche

**RomainVALERI** · 19/01/2011, 12h25

Envoyé par pm2989

Et j'ai pas trop saisi le soucis de déclaration que tu as mis en évidence ?

merci Auteur

**pm2989** · 19/01/2011, 13h55

J'ai essayé de mettre le code de la calculatrice a part pour faire un include dans ma page par la suite, si je vais sur la page ou j'ai mis le code de la calcu, ça fonctionne, mais sur la page ou j'include le tout , non.

C'est ce que je dis le script brut je réussi à le faire marcher mais quand je l'intègre dans une page j'ai ces messages d'erreur.
(Il ne touche pas a d'autres fichiers si vous vous dites que j'ai oublié d'inclure un fichier ou autre) et sous IE malgré un decalage de div je réussi à avoir le resultat donc c'est sous FF qu'un truc ne passe pas dans ma page...

(ps : si vous le souhaitez je peux vous mettre mon code en entier mais il est assez long donc ça dépend de votre courage ;-) )