Fonctions et champs de formulaire

Version imprimable

Bonjour,

Tout d'abord voici mon script.
Il dispose d'une fonction qui permet de calculer :
- le prix d'un article, en fonction de la quantité désirée avec calcul();
- le prix d'un article, en fonction du type de produit choisi (ici : standard ou bio) avec choisir();
Ces deux fonctions ont été testées et approuvées :yaisse2: !

Le problème arrive au moment d'assembler les deux. Cela marche, mais de manière assez basique, en mettant une instruction assez longue dans l'input (cf. abricots & bananes) :

Code:

<input type="text" name="abricots_nbre" onkeyup="if (biostandard == 'standard') { abricots.value=(2*this.value).toFixed(2); } else if (biostandard == 'bio') { abricots.value=(2.5*this.value).toFixed(2); } calcule();" />

Puisqu'à terme la liste doit pouvoir contenir beaucoup d'éléments, cela est très lourd. J'ai donc essayé de réduire la quantité de code utilisé en créant une nouvelle fonction prix();.

Seulement, ça ne marche pas... quelqu'un aurait-il une idée du problème ? Je soupçonne personnellement la concaténation... J'ai beaucoup de mal avec ça :aie:
Code:

1 2 3 4 5 6 7 function prix() { if (biostandard == 'standard') { document.getElementById("pommes").value=(1*document.getElementById("pommes_nbre").value).toFixed(2); } else if (biostandard == 'bio') { pommes.value=(1.5*this.value).toFixed(2); } }
$

Merci d'avance ;)

31/07/2007, 15h17
SpaceFrog

parseFloat parseInt et Number peuvent t'être utilies ...

il y a déja quelques posts sur le sujet et même dans la FAQ me semble-t-il ...
31/07/2007, 15h33
Corinne

En quoi parseFloat et parseInt pourraient-ils être utiles dans ce cas ?
Note : Je les ai déjà utilisés pour le calcul de mon total (cf. mon code dans sa totalité ici). Je ne cherche pas à refaire des calculs, je ne vois pas vraiment le rapport (?).
Merci d'avance.

PS. S'il existe des sujets dans la FAQ, pourrais-je au moins connaître le nom de mon problème pour les trouver, puisque je ne vois pas quel est le problème, merci :aie:
31/07/2007, 15h35
SpaceFrog

heu en fait j'ai juste vu cette ligne ...

Code:

pommes.value=(1.5*this.value).toFixed(2);

et je me disais que this aurait mérité un parseFloat avant d'être multiplié ...

jusqu'a ce que je me pose la question: c'est quoi this dans ce contexte ???
31/07/2007, 15h42
Corinne

(oublié de linker au-dessus, désolée).
this, c'est le nombre que l'utilisateur va entrer dans le premier input
En fait cette multiplication se passe bien, sans parseFloat.
Le problème ici c'est ma transformation de tout ce qu'il y a dans l'input vers une fonction.
PS. Si je suis pas claire n'hésitez pas à me dire, je réessaie :p
31/07/2007, 15h45
SpaceFrog

je ne vois pas comment this peut être la value saisie ???
this= la fonction à cet endroit ...

Ah tu parles du ELSE je crois (?)
En fait je n'ai pas encore arrangé le ELSE... Puisque si la condition est OK ça ne marche déjà pas :( Je crois qu'une fois que j'aurai trouvé le problème dans le IF, le ELSE pourra être assez facilement adapté, non ?

Mis à jour ça donne ça : (et ça ne marche pas ^^)
Code:

1 2 3 4 5 6 7 function prix() { if (biostandard == 'standard') { document.getElementById("pommes").value=(1*document.getElementById("pommes_nbre").value).toFixed(2); } else if (biostandard == 'bio') { document.getElementById("pommes").value=(1.5*document.getElementById("pommes_nbre").value).toFixed(2); } }

31/07/2007, 17h00
Corinne

Est-ce que, au moins, ma concaténation est juste ? Est-ce que mes "chemins" vers les champs choisis sont corrects ?
31/07/2007, 17h05
SpaceFrog

oui a mon avis c'est biostandard qui n'est pas une variable gobale ...

et donc pas reconnu au sein de la fonction ?
31/07/2007, 17h09
Corinne

J'ai défini biostandard ainsi au début de mon code (extérieur de toute fonction)

Code:

var biostandard = "";

Est-ce que cela n'en fait pas une globale ?
31/07/2007, 17h51
SpaceFrog

et

Code:

function prix() { alert(biostandard);

te repond quoi ?
31/07/2007, 19h04
Corinne

Une fenêtre d'alerte vide :(
Comment je peux m'assurer que ça devient bien une globale ?
31/07/2007, 19h11
SpaceFrog

si ta variable est décalrée en dehors d'une fonction,elle est globale ...

maintenant cherche où et à quel moment tu renseignes ta variable ...

Dans ma fonction choisir() ?
Code:

1 2 3 4 5 6 7 8 9 10 11 var choisir = function(choisi) { var choix = document.getElementById("lechoix"); if (choisi.value=="standard") { choix.value = choisi.value; biostandard = choisi.value; } else { choix.value = "bio"; biostandard = "bio"; } }
Est-ce que ça veut dire qu'en dehors de la fonction choisir, biostandard est indéfini ?

8O 8O
var = function ..pourquoi faire compliqué ???

Code:

1
2
3
4
5
6
7
function choisir(choisi) { 
var choix = document.getElementById("lechoix");   
if (choisi.value=="standard") {  choix.value = choisi.value; 
                                                  biostandard = choisi.value; }
else {  choix.value = "bio"; 
            biostandard = "bio"; } 
}

et choisi ? c'est quoi ?

Je poste mon code source dans son intégralité ici :p Je pensais que tu l'avais regardé sur le lien que j'ai posté ;) C'était pas très clair, désolée !

Code:

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
<script type="text/javascript" language="javascript">
 
var biostandard = "";
 
var choisir = function(choisi) {
	var choix = document.getElementById("lechoix");
 
	if (choisi.value=="standard") {
		choix.value = choisi.value;
		biostandard = choisi.value;
	} else {
		choix.value = "bio";
		biostandard = "bio";
	}
}
 
function prix() {
	if (biostandard == 'standard') { 
		document.getElementById("pommes").value=(1*document.getElementById("pommes_nbre").value).toFixed(2);
	} else if (biostandard == 'bio') {
		document.getElementById("pommes").value=(1.5*document.getElementById("pommes_nbre").value).toFixed(2);
	}
}
 
function calcule() {
	pommes_prix = document.getElementById('pommes').value;
	abricots_prix = document.getElementById('abricots').value;
	bananes_prix = document.getElementById('bananes').value;
 
	resultat = parseFloat(pommes_prix,10)+ parseFloat(abricots_prix,10)+ parseFloat(bananes_prix,10);
 
	total = resultat.toFixed(2);
	document.getElementById('le_total').value = total;
}
 
</script>

Code:

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
<form action="" method="post">
D&eacute;sirez-vous des aliments
  <input type="radio" name="question" id="question" value="standard" onfocus="choisir(this);" />
  standard
  <input type="radio" name="question" id="question" value="bio" onfocus="choisir(this);" />
  bio<br />
  (v&eacute;rification du choix) <input type="text" id="lechoix" name="choix" readonly="readonly" />
  <br />
  <br />
  <table cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td valign="top"><strong>Article</strong></td>
    <td><strong>Prix standard </strong></td>
    <td><strong>Prix bio</strong></td>
    <td valign="top"><strong>Quantit&eacute;</strong></td>
    <td><strong>Prix total</strong></td>
  </tr>
  <tr>
    <td>Pommes</td>
    <td>1 CHF </td>
    <td>1.50 CHF </td>
    <td><input type="text" name="pommes_nbre" onkeyup="prix(); calcule();" /></td>
    <td><input type="text" id="pommes" name="pommes" value="0" readonly="readonly" /></td>
  </tr>
  <tr>
    <td>Abricots</td>
    <td>2 CHF </td>
    <td>2.50 CHF </td>
    <td><input type="text" name="abricots_nbre" onkeyup="if (biostandard == 'standard') { abricots.value=(2*this.value).toFixed(2); } else if (biostandard == 'bio') { abricots.value=(2.5*this.value).toFixed(2); } calcule();" /></td>
    <td><input type="text" id="abricots" name="abricots" value="0" readonly="readonly" /></td>
  </tr>
  <tr>
    <td>Bananes</td>
    <td>3 CHF </td>
    <td>3.50 CHF </td>
    <td><input type="text" name="bananes_nbre" onkeyup="if (biostandard == 'standard') { bananes.value=(3*this.value).toFixed(2); } else if (biostandard == 'bio') { bananes.value=(3.5*this.value).toFixed(2); } calcule();" /></td>
    <td><input type="text" id="bananes" name="bananes" value="0" readonly="readonly" /></td>
  </tr>
  <tr>
    <td><strong>Total</strong></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td><input type="text" name="le_total" id="le_total" value="0" readonly="readonly" /></td>
  </tr>
</table>
 
</form>

oulà mais tu es une grande torturée toi :aie: ;)

Code:

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
<html>
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nouvelle page 1</title>
<script type="text/javascript" language="javascript">
 
var biostandard = true
 
function prix(obj_id) {
 
    total_ligne=0;
    switch (obj_id){
    					case ("pommes") : 	total_ligne=(biostandard)?(1*document.getElementById("pommes_nbre").value).toFixed(2):(1.5*document.getElementById("pommes_nbre").value).toFixed(2);
    											break;
    					case ("abricots") : 	total_ligne=(biostandard)?(1*document.getElementById("abricots_nbre").value).toFixed(2):(1.5*document.getElementById("abricots_nbre").value).toFixed(2);
    											break;
    					case ("bananes") : 	total_ligne=(biostandard)?(1*document.getElementById("bananes_nbre").value).toFixed(2):(1.5*document.getElementById("bananes_nbre").value).toFixed(2);
    											break;
    				}
    			document.getElementById(obj_id).value=total_ligne;	
}
 
function calcule() {
	pommes_prix = document.getElementById('pommes').value;
	abricots_prix = document.getElementById('abricots').value;
	bananes_prix = document.getElementById('bananes').value;
	resultat = parseFloat(pommes_prix,10)+ parseFloat(abricots_prix,10)+ parseFloat(bananes_prix,10);
	total = resultat.toFixed(2);
	document.getElementById('le_total').value = total;
}
 
function updatebiostandard(){
	biostandard=(document.getElementById('question1').checked);
	document.getElementById('lechoix').value=(biostandard)?'standard':'bio';
	prix('pommes');
	prix('abricots');
	prix('bananes');
	calcule();
	}
</script>
</head>
 
<body>
<form action="" method="post">
 D&eacute;sirez-vous des aliments  
 <input type="radio" name="question" id="question1" value="standard" checked='true' onclick='updatebiostandard()'/><label for="question1"> standard</label>
 <input type="radio" name="question" id="question2" value="bio" onclick='updatebiostandard()' /><label for="question2">  bio</label>
 <br />
 (v&eacute;rification du choix)
 <input type="text" id="lechoix" name="choix" readonly="readonly" value='standard' />
 <br />
 <br />
 <table cellpadding="0" cellspacing="0" border="0">
 	<tr>
 		<td valign="top"><strong>Article</strong></td>
 		<td><strong>Prix standard </strong></td>
 		<td><strong>Prix bio</strong></td>
 		<td valign="top"><strong>Quantit&eacute;</strong></td>
 		<td><strong>Prix total</strong></td>
 	</tr>
 	<tr>
 		<td>Pommes</td>
 		<td>1 CHF </td>
 		<td>1.50 CHF </td>
 		<td><input type="text" name="pommes_nbre" onkeyup="prix('pommes'); calcule();"  /></td>
 		<td><input type="text" id="pommes" name="pommes" value="0.00" readonly="readonly" /></td>
 	</tr>
 	<tr>
 		<td>Abricots</td>
 		<td>2 CHF </td>
 		<td>2.50 CHF </td>
 		<td><input type="text" name="abricots_nbre" onkeyup=" prix('abricots'); calcule();" /></td>
 		<td><input type="text" id="abricots" name="abricots" value="0.00" readonly="readonly" /></td>
 	</tr>
 	<tr>
 		<td>Bananes</td>
 		<td>3 CHF </td>
 		<td>3.50 CHF </td>
 		<td><input type="text" name="bananes_nbre" onkeyup="prix('bananes'); calcule();" /></td>
 		<td><input type="text" id="bananes" name="bananes" value="0.00" readonly="readonly" /></td>
 	</tr>
 	<tr>
 		<td><strong>Total</strong></td>
 		<td>&nbsp;</td>
 		<td>&nbsp;</td>
 		<td>&nbsp;</td>
 		<td><input type="text" name="le_total" id="le_total" value="0.00" readonly="readonly" /></td>
 	</tr>
 </table>
 </form>
 
 </label>
 
</body>
 
</html>

01/08/2007, 01h46
Corinne

Merci :)

J'ai donc essayé le code brut, tel quel ici :
http://www.exiledesigns.com/tempo/form/condition4.html
Il ne semble malheureusement pas fonctionner :(
(ça ne calcule plus mes totaux, d'ailleurs !)

Ensuite j'ai essayé de le comprendre :aie:
1. D'où ça sort obj_id et ça sert à quoi ?
2. Le ? après (biostandard) il indique quoi ?
3. Les : après la première formule (celui qui sépare prix standard de prix bio dans le case) symbolise un else ?
4. total_ligne sort d'où et sert à quoi ?

Citation:

Envoyé par SpaceFrog

oulà mais tu es une grande torturée toi :aie: ;)

C'est vraiment pas le bon code à produire. On est totalement attaché au contenu de la page, et le code est non évolutif. A savoir, qu'une modification du code entrainera une modification du javascript, ce qui n'est pas du tout le comportement qu'on attend d'une application.

Le code applicatif :

Code:

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
	<script type="text/javascript">
 
 
		//Cette fonction execute fun sur chacun des élements du tableau
		function forEach(array,fun,offSet,Limit,thisp) {
			var i;
			var j = 0;
			var start = offSet || 0;
			var stop = Limit || array.length;
			for(i = start; i < stop; i++,j++) {
				fun(array[i], thisp);
			}
		}
 
		window.onload = function() {
			var product = document.getElementById('produits');
			var productLines = product.getElementsByTagName('tr');
 
			var chooseType = document.getElementById('chooseType');
			var typeChoice = chooseType.getElementsByTagName('input');
 
			var choiceDisplay = document.getElementById('lechoix');
			var basePrice = (typeChoice[0].checked == true) ? "standard" : "bio";
			var totalItems = [];
			var totalPrice = document.getElementById('le_total');
 
			//Retourne un chiffre à deux decimales
			function getRNumber(text) {
				return parseFloat(text).toFixed(2);
			}
 
			//On ajoute les totaux, et on modifie le grand Total
			function computeTotal() {
				var total = 0;
				//Pour chaque total
				forEach(totalItems,addPrice);
				//On ajoute la valeur dans un chiffre
				function addPrice(el) {
					total += parseFloat(el.value);
				}
				//On l'injecte dans le total du bas
				return getRNumber(total);
			}
 
			//Calcule le total d'une ligne
			function computeLine(el) {
 
				//L'élement ciblé
				var content;
 
				//On passe dans le cas ou le prix est changé via un changement de base
				if(this == window) {
					content = el.inputs[0];
				} else {
					content = this;
				}
 
				//Le multiplier c'est le nombre d'éléments, et le price c'est la base de prix qu'on se fixe (normal ou bio).
				var multiplier = getRNumber(content.value);
				var price = content.line.prop[basePrice];
				//Le total présumé
				var assumedTotal = getRNumber(multiplier*price);
				//Si ce n'est pas un nombre (par exemple on entre des lettres dans le champs), on affiche zéro
				var itemTotal = isNaN(assumedTotal) ? 0 : assumedTotal;
				content.lineTotal.value = itemTotal;
				//On update le prix total
				totalPrice.value = computeTotal();
			}
 
			function attachProperties(el) {
				//On crée un objet qui contient nos propriétés custom
				el.prop = {};
				el.prop.type = el.cells[0].innerHTML;
				el.prop.standard = getRNumber(el.cells[1].innerHTML);
				el.prop.bio = getRNumber(el.cells[2].innerHTML);
 
				//On récupère les inputs de la ligne
				var inputs = el.getElementsByTagName('input');
				el.inputs = inputs;
 
				//On accroche une fonction qui s'execute à la frappe de touche
				inputs[0].onkeyup = computeLine;
				//On fait une référence à la ligne.
				inputs[0].line = el;
				//On fait une référence au input de total
				inputs[0].lineTotal = inputs[1];
 
				totalItems.push(inputs[1]);
			}
 
			function updateChoice(el) {
				el.onclick = function() {
					basePrice = choiceDisplay.value = this.value;
					forEach(productLines,computeLine,1,productLines.length-1);
				}
			}
 
			//On itère sur les lignes du tableau en sautant la dernière et la première, et on les type avec attachProperties.
			forEach(productLines,attachProperties,1,productLines.length-1);
			forEach(typeChoice,updateChoice);
 
		}
	</script>

Le code html

Code:

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
<form action="" method="post">
 D&eacute;sirez-vous des aliments
<!-- Ici on ajoute un id pour cibler plus facilement les élements dans le document. -->
<p id="chooseType">
 <input type="radio" name="question" id="question1" value="standard" checked='true'/><label for="question1">Standard</label>
 <input type="radio" name="question" id="question2" value="bio" /><label for="question2">Bio</label>
</p>
 (v&eacute;rification du choix)
 <input type="text" id="lechoix" name="choix" readonly="readonly" value='standard' />
 <br />
 <br />
 <table cellpadding="0" cellspacing="0" border="0" id="produits">
 	<tr>
 		<td valign="top"><strong>Article</strong></td>
 		<td><strong>Prix standard </strong></td>
 		<td><strong>Prix bio</strong></td>
 		<td valign="top"><strong>Quantit&eacute;</strong></td>
 		<td><strong>Prix total</strong></td>
 	</tr>
 	<tr>
 		<td>Pommes</td>
 		<td>1 CHF </td>
 		<td>1.50 CHF </td>
 		<td><input type="text" name="pommes_nbre"/></td>
 		<td><input type="text" id="pommes" name="pommes" value="0.00" readonly="readonly" /></td>
 	</tr>
 	<tr>
 		<td>Abricots</td>
 		<td>2 CHF </td>
 		<td>2.50 CHF </td>
 		<td><input type="text" name="abricots_nbre"/></td>
 		<td><input type="text" id="abricots" name="abricots" value="0.00" readonly="readonly" /></td>
 	</tr>
 	<tr>
 		<td>Bananes</td>
 		<td>3 CHF </td>
 		<td>3.50 CHF </td>
 		<td><input type="text" name="bananes_nbre" /></td>
 		<td><input type="text" id="bananes" name="bananes" value="0.00" readonly="readonly" /></td>
 	</tr>
 	<tr>
 		<td><strong>Total</strong></td>
 		<td>&nbsp;</td>
 		<td>&nbsp;</td>
 		<td>&nbsp;</td>
 		<td><input type="text" name="le_total" id="le_total" value="0.00" readonly="readonly" /></td>
 	</tr>
 </table>
</form>

Ca gère :
-Les lignes à répétition quelque soit le nombre et le contenu, tant qu'on le schéma présenté,mais ça reste adaptable.
-La mise à jour du prix sur le changement de type, bio ou "normal"
-La mise à jour du prix en cas de rechargement (sous firefox qui garde l'état des form)
-La modification de la forme uniquement.

01/08/2007, 08h49
SpaceFrog

ce n'était pas la question ... personne n'a parlé d'autre fruits ? si ?
je pense que cela ne doit être qu'un exercice, et le code fourni présente au moins l'avantage d'être compréhensible.
La seconde étape aurait donc biensur été de rendre ce script indépendant du html ...
01/08/2007, 13h45
Corinne

Oh my god :aie: !

Pour information, je suis débutante à fond !
J'ai des notions correctes en PHP/MySQL, et très bonnes en CSS/(X)HTML, très peu en XML et rien du tout en Javascript à part faire des rollovers xD

Depuis une semaine, j'estime que j'ai déjà intégré beaucoup de choses (en grande partie grâce à tous ceux qui m'ont très gentiment aidée ici)... et à vrai dire je n'ai pas vraiment eu le choix puisqu'il me faut appliquer ceci à un cas réel.

Donc, oui il y aurait plus de "fruits" dans mon application réelle, mais il me semblait important de commencer pas à pas avec quelque chose de petit !

Pour le moment, tout ce qu'on me propose reste donc assez exotique pour moi, mais ayant quelques notions extérieures au Javascript, je peux en comprendre au moins un bon, allez soyons fous, 50% :D
(Par exemple dans le code proposé par Shinuza, j'ai beaucoup de mal car j'ai l'impression que je saute beaucoup d'étapes, non ?)
J'avais déjà du mal avec les boucles en PHP (je suis pas très matheuse !) et je ne connais que très peu de fonctions Javascript.

J'apprécie bien sûr extrêmement une telle vision du code, pour moi aussi il est important que le code soit le plus "externalisé" et pratique que possible. Cela dit, oui, ça brûle beaucoup d'étapes... Je vais cependant tout de même me pencher là-dessus et revenir avec beaucoup de questions :D

Donc merci !
01/08/2007, 14h51
Corinne

Bon voilà les premières questions... sur la fonctionnalité du script.
Merci d'avance !

1. Que se passera-t-il si pour certains produits je n'aurai pas de prix bio ? (cela se reflétera dans le tableau par une absence de prix). Le script va-t-il réussir à passer outre cette absence d'information dans l'un des <td>, et à n'en interpréter que la première ? (j'ai de grands doutes, mais j'essaie :p)

2. Que se passera-t-il si j'ai des <th> entre certains de mes produits (des sous-titres, par exemple 'fruits du verger' ou 'légumes du jardinier'. Le script va-t-il joyeusement passer outre ? (c'est espéré aussi)

3. Si j'ajoute des informations un peu partout dans le tableau pour le styler (notamment des class="") est-ce que cela va déranger le script ?

4. Dans la première boucle, qu'est-ce qu'on entend par "chacun des éléments du tableau" (chaque <td> ?) et que représentent i et j ?
01/08/2007, 15h11
SpaceFrog

Citation:

1. Que se passera-t-il si pour certains produits je n'aurai pas de prix bio ? (cela se reflétera dans le tableau par une absence de prix). Le script va-t-il réussir à passer outre cette absence d'information dans l'un des <td>, et à n'en interpréter que la première ? (j'ai de grands doutes, mais j'essaie :p)

Il faudrait alors prévoir un bouton bio ou standard pas fruit ...
ou alors remettre à 0 les quantité et disabler le inout texte des fruits n'ayant pas de bio lors du click sur le radio

Citation:

2. Que se passera-t-il si j'ai des <th> entre certains de mes produits (des sous-titres, par exemple 'fruits du verger' ou 'légumes du jardinier'. Le script va-t-il joyeusement passer outre ? (c'est espéré aussi)

Joyeusement je ne sais pas mis l'appel aux elements se fait par leur name ou leur id donc peu importe

Citation:

3. Si j'ajoute des informations un peu partout dans le tableau pour le styler (notamment des class="") est-ce que cela va déranger le script ?

Il n'y a pas de contreindication au css ...

Citation:

4. Dans la première boucle, qu'est-ce qu'on entend par "chacun des éléments du tableau" (chaque <td> ?) et que représentent i et j ?

Je laisse l'auteur s'exprimer sur ce sujet
01/08/2007, 19h57
Shinuza
Citation:

Envoyé par SpaceFrog

ce n'était pas la question ... personne n'a parlé d'autre fruits ? si ?
je pense que cela ne doit être qu'un exercice, et le code fourni présente au moins l'avantage d'être compréhensible.
La seconde étape aurait donc biensur été de rendre ce script indépendant du html ...

Je sais bien, c'est un exemple de code.
C'est mal commenté (mais c'est mieux que pas du tout) et ça montre qu'on peut s'affranchir du code dans le html, et rester totalement souple.

Ensuite j'utilise des helpers et des changements de bind sur les events, des réferences, ect... Je suis conscient que c'est un autre niveau.

Il faut savoir que le javascript est vraiment mal développé en france, et c'est parce qu'on recopie beaucoup ce qui se fait à droite à gauche, sans vraiment chercher à comprendre et à améliorer.

A coté de ça, on me reproche de critiquer de manière non constructive, alors j'apporte ma pierre à l'édifice en proposant un code que je juge relativement propre.

Les notions pour cet exerice selon moi sont :

Les events handlers (onkeyup,onclick) ect..
Des notions de DOM (Document Object Model)
La possibilité de modifier les propriétés d'un élément HTML
Les boucles
Les methodes/fonctions intégrée à javascript.

Corrine :

1-Il faudrait le modifier en conséquence, créer une condition en fonction de ce que tu veux, par exemple que si il n'y a pas de prix bio, alors le prix sera toujours le prix "normal"
2-En fait non,

Code:

forEach(productLines,attachProperties,1,productLines.length-1);

Ici,
-productLines c'est le tableau à parcourir (en l'occurence tous les tr - les lignes - de ton tableau ) que j'ai récupéré avec getElementsByTagName('tr')
Ce tableau commence à 0, donc un tableau à 4 lignes ira de 0 a 3. (on verra après comment je saute des lignes en début et fin de tableau)
-attachProperties, c'est la fonction que j'execute sur chaque des lignes que je parcours.
-Le 1, c'est l'offset, en gros le décalage de départ, je pars de la ligne numéro 2 (comme le tableau commence à zéro)
- productLines.length-1, c'est la limite, je m'arrête à l'avant derrière ligne du tableau (le total de ligne-1), length étant la taille du tableau.

En gros, avec un tableau de 12 lignes, montableau.length = 12, mais le tableau va de 0 a 11 ;)

Si tu sautes deux lignes, tu dois modifier?

3-Absolument pas, en javascript pour modifier la class d'un élement, on utiliser monElement.className, hors je ne touche pas à cette propriété.

4-J ne sers à rien dans le tableau, j'ai modifié la fonction, j'ai oublié de l'enlever :aie:
I sert de compteur dans la boucle (il faut voir la documentation sur la boucle for) http://developer.mozilla.org/en/docs...Statements:for

En gros, dans for(), on a trois parties :
La valeur de depart, la condition et les actions qu'on fait à chaque tour de boucle
Code:

1 2 3 4 5 var i; for(i=0;i<5;i++) { alert(i); }
Tant que i est inférieur à 5, on déclenche une alert qui affiche la valeur de i