Nom de variable dynamique en JS

**divad** · 01/10/2009, 00h12

Bonjour,

Je suis débutant en JS et j'ai besoin de votre aide s'il vous plait. Je pense que la solution est simple même si j'explique le problème assez longuement.

J'ai un bout de code qui me permet de stocker des données dans un tableau, en javascript. Ces données sont issues d'une base de données et sont appelées via un while en php.

j'ai donc une structure comme cela dans ma page PHP:

déclaration du tableau economieMaxiZone[] (code JS)
requete sql
while (résultats requete){
traitement php
code JS (code JS)
}

Ma requete me retourne par exemple 10 lignes, contenant différents champs tels que le champ "zoneTarif_debutZone". On va prendre l'exemple de celui ci.

Je souhaite dans mon traitement JS, mettre tous les "zoneTarif_debutZone" qui me seront retournés.
Donc si j'ai bien compris, il m'est possible commencer par faire ceci:

Code :

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

<input type="hidden" id="zoneTarif_debutZone" value="<?php echo $donnees['zoneTarif_debutZone'] ; ?>" />

en html. Puis pour le javascript, j'aimerai faire quelque chose du genre:

Code :

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

1
2
3
4
5
6
7
 
<script language="javascript">
 
	var zoneTarif_finZone = document.getElementById("zoneTarif_finZone").value;	
 
economieMaxiZone.push(zoneTarif_finZone *10);
</script>

Il se trouve que la chose fonctionne presque bien puisque mon tableau se remplit MAIS il n'y a que la première valeur qui est dupliquée dans toutes les cases du tableau.

Quelqu'un a essayé de me faire avancer en me disant que tous mes input ont le même id ("zoneTarif_finZone") donc quand je fais document.getElementById("zoneTarif_finZone") il récupère le premier élément qu'il trouve et ne s'occupe pas des suivants. Il faudrait donc que je donne un id unique à chacun.

Le souci est ici, je ne vois pas comment faire...
Ajouter un numero par exemple mais comment... et surtout comment récupérer le nom de ces variables pour qu'on puisse tout entrer dans le tableau?

Merci beaucoup!

D.

**hotline** · 01/10/2009, 06h26

Bonjour,

Ajouter un numéro me parait une bonne idée.
Tu initialises un compteur et dans la boucle php tu l'incrémentes à chaque ligne :

Code :

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

1
2
3
4
5
6
7
 
déclaration du tableau economieMaxiZone[] (code JS)
$cptr=0;
requete sql
while (résultats requete){
traitement php  et js : id="zoneTarif_debutZone"+$cptr
$cptr++;

et ensuite en javascript, tu fais une boucle:

Code :

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

1
2
3
4
5
 
var tableau = new Array;
for (var i = 0; i < nb_reponse; i++) {
 tableau[i] = getElementById("zoneTarif_debutZone"+i).value;	
}

**divad** · 01/10/2009, 08h33

Merci beaucoup! Je regarde ça ce midi ou ce soir et te tiens au courant!

D.

**divad** · 02/10/2009, 19h44

Bonsoir, désolé pour le retard.

Bon, je vous livre ce que j'ai fait, car je ne m'en sors vraiment pas:

La déclaration:

Code :

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

1
2
3
4
5
6
7
8
 
<?php
$i = 0; 
$total = 0; ?>
<script language="javascript">
var economieMaxiZone = [];
var cptrJS = 0;
</script>

Lecture de la bdd

Code :

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

1
2
3
4
 
while ($donnees = mysql_fetch_array($requete)){
 
... traitements divers puis

et après, le morceau de code permettant d'ajouter des choses à mon tableau est le suivant:

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
 
?>
	<input type="hidden" id="zoneTarif_finZone<?php echo $cptr; ?>" value="<?php echo $donnees['zoneTarif_finZone'] ; ?>" />
 
	<script language="javascript">
 
	var zoneTarif_finZone = document.getElementById("zoneTarif_finZone"+cptrJS).value;	
 
	//Ajout au tableau 
	economieMaxiZone.push((zoneTarif_finZone+cptr - zoneTarif_debutZone) * 14;
 
var ctprJS++;
	</script>
	<?php
        $cptr++;
}
?>

Enfin pour fini, je tente de lire mon tableau mais celui ci reste vide... Je le lis grace au code suivant:

Code :

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

1
2
3
4
5
6
7
<script language="javascript">
//Affichage du contenu du tableau
 var chaine = "Le tableau contient :"
        for(var i=0; i<economieMaxiZone.length; i++)
                chaine += "\n" + i + " -> " + economieMaxiZone[i];
        alert(chaine);
  </script>

L'erreur qui m'est donnée par WebDeveloper est "Error: document.getElementById("zoneTarif_finZone") is null
Source File: http://127.0.0.1/monSite/index.php?page=tableau
Line: 124"

et la ligne 124, dans le code source généré est la suivante:

var zoneTarif_finZone = document.getElementById("zoneTarif_finZone"+cptrJS).value;

A vrai dire, les mêmes erreurs sont répétées, autant de fois que de boucles while sont effectuées.

Voilà, désolé de balancer du brut comme ça mais je ne m'en sors pas. je peux fournir la vrai page à qqun qui me le demande si vous voulez.

Merci encore!!!

D.

**SpaceFrog** · 02/10/2009, 19h58

si tu lances le code direct c'est normal l'objet n'est pas encore instancié
mets ton code dans une fonction et lance la fonction dans le onload

**Bovino** · 02/10/2009, 20h01

Salut,
il s'agit manifestement d'une mauvaise imbrication de syntaxes dans ton PHP.
Donne-nous le code HTML généré, ce qui permettra de voir plus facilement à quel(s) endroit(s) ça plante

**divad** · 02/10/2009, 20h11

SpaceFrog, je ne comprends pas ce que tu veux dire.

Bovino, je te fais un copier coller du code généré.... je tente de l'épurer avant un peu quand même

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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
 
 
<head>
</head>
 
 
<body>
 
						<div class="entry"> 
							<p>
 
<script language="javascript">
var cptrJS = 0;
var economieMaxiZone = [];
</script>	<input type="hidden" id="zoneTarif_finZone0" value="157762800" />
	<input type="hidden" id="zoneTarif_debutZone" value="0" />
	<input type="hidden" id="zoneTarif_prix" value="2.00" />
	<input type="hidden" id="nombreCigarettesJour" value="20" />
	cptr: 0	<script language="javascript">
 
	var zoneTarif_finZone = document.getElementById("zoneTarif_finZone"+cptrJS).value;	
	var zoneTarif_debutZone = document.getElementById("zoneTarif_debutZone").value;
	var zoneTarif_prix = document.getElementById("zoneTarif_prix").value;
	var nombreCigarettesJour = document.getElementById("nombreCigarettesJour").value;
 
	if (zoneTarif_finZone == ""){
		var zoneTarif_finZone = Math.floor(time.getTime()/1000);
	}
	//Ajout au tableau contenant les économies réalisées dans les zones après celle l'arret
	economieMaxiZone.push((zoneTarif_finZone+cptr - zoneTarif_debutZone) * (zoneTarif_prix/20/24/60/60) * nombreCigarettesJour);
	//alert("mon tableau contient: "+economieMaxiZone[1]);
	//alert ("Fin zone: "+zoneTarif_finZone);
 
	</script>
 
		<input type="hidden" id="zoneTarif_finZone1" value="315529200" />
	<input type="hidden" id="zoneTarif_debutZone" value="157762801" />
	<input type="hidden" id="zoneTarif_prix" value="3.00" />
	<input type="hidden" id="nombreCigarettesJour" value="20" />
	cptr: 1	<script language="javascript">
 
	var zoneTarif_finZone = document.getElementById("zoneTarif_finZone"+cptrJS).value;	
	var zoneTarif_debutZone = document.getElementById("zoneTarif_debutZone").value;
	var zoneTarif_prix = document.getElementById("zoneTarif_prix").value;
	var nombreCigarettesJour = document.getElementById("nombreCigarettesJour").value;
 
	if (zoneTarif_finZone == ""){
		var zoneTarif_finZone = Math.floor(time.getTime()/1000);
	}
	//Ajout au tableau contenant les économies réalisées dans les zones après celle l'arret
	economieMaxiZone.push((zoneTarif_finZone+cptr - zoneTarif_debutZone) * (zoneTarif_prix/20/24/60/60) * nombreCigarettesJour);
	//alert("mon tableau contient: "+economieMaxiZone[1]);
	//alert ("Fin zone: "+zoneTarif_finZone);
 
	</script>
		<input type="hidden" id="zoneTarif_finZone2" value="631148400" />
	<input type="hidden" id="zoneTarif_debutZone" value="315529201" />
	<input type="hidden" id="zoneTarif_prix" value="4.00" />
 
	<input type="hidden" id="nombreCigarettesJour" value="20" />
	cptr: 2	<script language="javascript">
 
	var zoneTarif_finZone = document.getElementById("zoneTarif_finZone"+cptrJS).value;	
	var zoneTarif_debutZone = document.getElementById("zoneTarif_debutZone").value;
	var zoneTarif_prix = document.getElementById("zoneTarif_prix").value;
	var nombreCigarettesJour = document.getElementById("nombreCigarettesJour").value;
 
	if (zoneTarif_finZone == ""){
		var zoneTarif_finZone = Math.floor(time.getTime()/1000);
	}
	//Ajout au tableau contenant les économies réalisées dans les zones après celle l'arret
	economieMaxiZone.push((zoneTarif_finZone+cptr - zoneTarif_debutZone) * (zoneTarif_prix/20/24/60/60) * nombreCigarettesJour);
	//alert("mon tableau contient: "+economieMaxiZone[1]);
	//alert ("Fin zone: "+zoneTarif_finZone);
 
	</script>
		<input type="hidden" id="zoneTarif_finZone3" value="946681200" />
	<input type="hidden" id="zoneTarif_debutZone" value="631148401" />
	<input type="hidden" id="zoneTarif_prix" value="5.00" />
	<input type="hidden" id="nombreCigarettesJour" value="20" />
	cptr: 3	<script language="javascript">
 
	var zoneTarif_finZone = document.getElementById("zoneTarif_finZone"+cptrJS).value;	
	var zoneTarif_debutZone = document.getElementById("zoneTarif_debutZone").value;
	var zoneTarif_prix = document.getElementById("zoneTarif_prix").value;
	var nombreCigarettesJour = document.getElementById("nombreCigarettesJour").value;
 
	if (zoneTarif_finZone == ""){
		var zoneTarif_finZone = Math.floor(time.getTime()/1000);
	}
	//Ajout au tableau contenant les économies réalisées dans les zones après celle l'arret
	economieMaxiZone.push((zoneTarif_finZone+cptr - zoneTarif_debutZone) * (zoneTarif_prix/20/24/60/60) * nombreCigarettesJour);
	//alert("mon tableau contient: "+economieMaxiZone[1]);
	//alert ("Fin zone: "+zoneTarif_finZone);
 
	</script>
 
		<input type="hidden" id="zoneTarif_finZone4" value="1104534000" />
	<input type="hidden" id="zoneTarif_debutZone" value="946681201" />
	<input type="hidden" id="zoneTarif_prix" value="6.00" />
	<input type="hidden" id="nombreCigarettesJour" value="20" />
	cptr: 4	<script language="javascript">
 
	var zoneTarif_finZone = document.getElementById("zoneTarif_finZone"+cptrJS).value;	
	var zoneTarif_debutZone = document.getElementById("zoneTarif_debutZone").value;
	var zoneTarif_prix = document.getElementById("zoneTarif_prix").value;
	var nombreCigarettesJour = document.getElementById("nombreCigarettesJour").value;
 
	if (zoneTarif_finZone == ""){
		var zoneTarif_finZone = Math.floor(time.getTime()/1000);
	}
	//Ajout au tableau contenant les économies réalisées dans les zones après celle l'arret
	economieMaxiZone.push((zoneTarif_finZone+cptr - zoneTarif_debutZone) * (zoneTarif_prix/20/24/60/60) * nombreCigarettesJour);
	//alert("mon tableau contient: "+economieMaxiZone[1]);
	//alert ("Fin zone: "+zoneTarif_finZone);
 
	</script>
		<input type="hidden" id="zoneTarif_finZone5" value="" />
	<input type="hidden" id="zoneTarif_debutZone" value="1104534001" />
	<input type="hidden" id="zoneTarif_prix" value="6.20" />
 
	<input type="hidden" id="nombreCigarettesJour" value="20" />
	cptr: 5	<script language="javascript">
 
	var zoneTarif_finZone = document.getElementById("zoneTarif_finZone"+cptrJS).value;	
	var zoneTarif_debutZone = document.getElementById("zoneTarif_debutZone").value;
	var zoneTarif_prix = document.getElementById("zoneTarif_prix").value;
	var nombreCigarettesJour = document.getElementById("nombreCigarettesJour").value;
 
	if (zoneTarif_finZone == ""){
		var zoneTarif_finZone = Math.floor(time.getTime()/1000);
	}
	//Ajout au tableau contenant les économies réalisées dans les zones après celle l'arret
	economieMaxiZone.push((zoneTarif_finZone+cptr - zoneTarif_debutZone) * (zoneTarif_prix/20/24/60/60) * nombreCigarettesJour);
	//alert("mon tableau contient: "+economieMaxiZone[1]);
	//alert ("Fin zone: "+zoneTarif_finZone);
 
	</script>
	<script language="javascript">
//Affichage du contenu du tableau
 var chaine = "Le tableau contient :"
        for(var i=0; i<economieMaxiZone.length; i++)
                chaine += "\n" + i + " -> " + economieMaxiZone[i];
        alert(chaine);
  </script>		</p>
						</div>
					</div>
 
</body>
</html>

et tant qu'on y est, voilà la source... merci de votre aide, je commence à craquer...

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
 
<?php
$idUser = $_SESSION['idUser'];
$timestampArret = $_SESSION['timestampArret'];
$nombreCigarettesJour = $_SESSION['utilisateur_nbreCigarettesJour'];
$requete = mysql_query("SELECT * FROM zonetarif ; ");
$cptr = 0;
 
?>
 
<script language="javascript">
var cptrJS = 0;
var economieMaxiZone = [];
</script><?php
while ($donnees = mysql_fetch_array($requete)){
        
$debutZone= $donnees['zoneTarif_debutZone'];
$finZone= $donnees['zoneTarif_finZone'];
?>
	<input type="hidden" id="zoneTarif_finZone<?php echo $cptr; ?>" value="<?php echo $donnees['zoneTarif_finZone'] ; ?>" />
	<input type="hidden" id="zoneTarif_debutZone" value="<?php echo $debutZone ; ?>" />
	<input type="hidden" id="zoneTarif_prix" value="<?php echo $donnees['zoneTarif_prix']; ?>" />
	<input type="hidden" id="nombreCigarettesJour" value="<?php echo $_SESSION['utilisateur_nbreCigarettesJour'] ; ?>" />
	<?php echo "cptr: ".$cptr; ?>
	<script language="javascript">
 
	var zoneTarif_finZone = document.getElementById("zoneTarif_finZone"+cptrJS).value;	
	var zoneTarif_debutZone = document.getElementById("zoneTarif_debutZone").value;
	var zoneTarif_prix = document.getElementById("zoneTarif_prix").value;
	var nombreCigarettesJour = document.getElementById("nombreCigarettesJour").value;
 
	if (zoneTarif_finZone == ""){
		var zoneTarif_finZone = Math.floor(time.getTime()/1000);
	}
	//Ajout au tableau contenant les économies réalisées dans les zones après celle l'arret
	economieMaxiZone.push((zoneTarif_finZone+cptr - zoneTarif_debutZone) * (zoneTarif_prix/20/24/60/60) * nombreCigarettesJour);
	//alert("mon tableau contient: "+economieMaxiZone[1]);
	//alert ("Fin zone: "+zoneTarif_finZone);
 
	</script>
	<?php
        $cptr++;
}
?>
<script language="javascript">
//Affichage du contenu du tableau
 var chaine = "Le tableau contient :"
        for(var i=0; i<economieMaxiZone.length; i++)
                chaine += "\n" + i + " -> " + economieMaxiZone[i];
        alert(chaine);
  </script>

Nom de variable dynamique en JS

JavaScript

Vue hybride

Discussions similaires

Partager

Partager