Discussion :

[MoKeS]

Bonjour à tous,

J'ai sur une page plusieurs boutons, chacun correspondant à un "article". Quand je clique sur un bouton (générés dynamiquement grâce à une boucle) ça m'ajoute l'article dans la base. Aucun problème ça fonctionne grâce à ça :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
var btns = document.getElementsByTagName("input"); 
 
for(var i = 0 ; i<btns.length ; i++) // pour que tous les boutons soient clicquables
			{
				if(btns[i].id == "btnAddPanier" ) //on vérifie bien que le bouton cliqué est celui correspondant à un ajout au panier 
				{
 
								btns[i].onclick = AddPanier;
				}
			}

Je voudrais maintenant (pour autre des radio button), récupérer le "i" que j'ai cliqué... (Par exemple, je peux récupérer le nom du bouton, en faisant

Code :

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

var test = this.name

y'a t'il une solution pour récupérer l'index du bouton ?? (en gros le i dans la boucle)... si je mets une variable "test" dans la boucle, elle prendra automatiquement la dernière valeur de la boucle.
J'ai essayé

Code :

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

this.index

à tout hasard.... mais ne fonctionne pas... et google ne me trouve pas de problèmes similaires.

Merci d'avance pour vos propositions

Cordialement,

MoKeS

[SpaceFrog]

tu peux nous montrer la boucle sure les radios ...
tu veux recupérer quel i ? il y a un test dans la boucle ?

[MoKeS]

Bonsoir,

Justement, j'ai tenté de faire une boucle sur les radios...mais ça me choisis automatiquement celle qui est à l'index inputs[inputs.length]...

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
 
var btnAddPanier = document.getElementById("btnAddPanier");
var btns = document.getElementsByTagName("input"); // on récupère tous les inputs de la page dans l'ordre suivant ( radio, radio, button, radio radio, button, etc.)
 
function addPanier()
{
   var qte = prompt('<?php echo TXT_MANY; ?>','1'); 
   var refArticle = this.name ;
   var prix ;
 
    // code que j'aimerais mettre en place
   var test = this.index; //(this = le bouton sur  lequel j'ai cliqué, index= index du bouton (i) de la boucle ci dessous.
     if(btns[test-1].selected= true)
      {
           prix = btns[test-1].value ;
      }
    if(isNaN(qte))
	{
		alert("<?php echo TXT_ERROR_MANY ?>");
	}
 
	if(qte !=null && !isNaN(qte))
	{
								window.location.href="ajout_panier.php?qte="+qte+"&ref="+refArticle+"&prix="+prix; // on passe sur la page qui gère l'ajout dans le panier 
	}
 
}
 
for(var i = 0 ; i<btns.length ; i++) // pour que tous les boutons soient clicquables
{
	if(btns[i].id == "btnAddPanier" ) //on vérifie bien que le bouton cliqué est celui correspondant à un ajout au panier 
	{
 
		btns[i].onclick = AddPanier; // pour que je puisse cliquer sur tous les boutons. c'est CE i que je veux récupérer
	}
}

je veux récupérer le i (index) du bouton sur lequel j'ai appuyé ... (parce que les boutons radios sont à chaque fois à i-1 et i-2 du bouton...)

pas de test dans la boucle

merci d'avance

Cordialement,
MoKeS

[Oscar Hiboux]

Ton affaire m'a l'air assez spéciale mais si tu es ouvert à l'usage de prototype.js tu pourrais écrire un truc du genre :

Code :

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

1
2
3
4
5
6
7
$$("input").each(function(button, index) {
    if(button.id == "btnAddPanier") {
        button.observe("click", function(event) {
            AddPanier(index);
        });
    }
});

Lors de l'appel à AddPanier ci-dessus on est dans un contexte où index a la valeur qui t'intéresse. Je te propose de la passer en argument mais tu pourrais faire autrement bien sûr.

[andry.aime]

Salut,

if(btns[test-1].selected= true)

Affectes true à btns[test-1].selected donc toujours vrai.

Code :

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

if(btns[test-1].selected)

[SpaceFrog]

Oui en javascript l'opérateur de comparaison d'egalité est == ou ===

Code :

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

if(btns[test-1].selected==true)

ou le raccourci de andry

[MoKeS]

le == était juste une erreur de frappe et n'est pas lié à mon problème .

Pour Oscar :
Je n'utilise pas prototype.js, je suis en stage, j'aimerais bien l'utiliser, mais je n'ai pas trop le temps d'apprendre et de voir comment ça s'implémente mais merci pour le tuyau que je pourrais un jour utiliser quand je serais sous prototype .


Pour en revenir à nos moutons, la variable TEST que j'ai implémentée dans mon code est "undefined" ... parce que this.index n'existe pas..

Alors soit je ne peux tout simplement pas récupérer l'index du bouton sur lequel j'ai cliqué (bouton qui se trouve rangé dans un tableau à cause du getElementsByTagName), soit il y a un attribut qui existe et dont je ne conais pas l'existence (encore) et ni la syntaxe.
Donc quelle est la bonne solution ?
- On ne peut pas ?
- ou ..... il y a une syntaxe particulière pour ce que je demande.

Cordialement,

MoKeS

[andry.aime]

Mais en paramètre l'objet cible.

Code :

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

1
2
3
4
5
function addPanier(obj)
{var qte = prompt('<?php echo TXT_MANY; ?>','1'); 
   var refArticle = obj.name ;
.....
}

Code :

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

<input type="button" onclick="addPanier(this)" value="Ajouter"/>

[MoKeS]

Oui, mais malheureusement en événementiel tu ne peux pas mettre de parenthèses :

Code :

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

1
2
3
4
5
6
7
8
9
 
for(var i = 0 ; i<btns.length ; i++) // pour que tous les boutons soient clicquables
			{
				if(btns[i].id == "btnAddPanier" ) //on vérifie bien que le bouton cliqué est celui correspondant à un ajout au panier 
				{
 
					btns[i].onclick = AddPanier; // on ne peut pas mettre = AddPanier(i);
				}
			}

on peut pas mettre btns[i].onclick = AddPanier(i);

comme dit, j'ai fait ça de la sorte, pour éviter d'avoir à créer manuellement les boutons (vu que je ne sais pas combien il y en aura)...

Mais je vois ce que tu veux dire, mais je pensais que ce n'était pas "propre" de mettre des onclick = ... lors de la création du bouton ?

[MoKeS]

J'ai trouvé une solution ! Un peu système D mais très efficace :

Code :

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

1
2
3
4
5
6
7
8
9
10
for(var i = 0 ; i<btns.length ; i++) // pour que tous les boutons soient clicquables
			{
				if(btns[i].id == "btnAddPanier" ) //on vérifie bien que le bouton cliqué est celui correspondant à un ajout au panier 
				{
								
				btns[i].id = i ; // pour pouvoir récupérer l'index du bouton.
				btns[i].onclick = AddPanier;
				}
			}

et la fonction AddPanier :

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
 
 
function AddPanier() // fonction pour ajouter un élement au panier
		{
			var qte = prompt('<?php echo TXT_MANY; ?>','1'); 
			var refArticle = this.name ;
			var prix; 
			index = this.id  ; // on récupère l'index du bouton qui a été cliqué
 
 
			if(btns[index-1].checked==true) // on sait que le prix IRCOS est juste avant le bouton donc index du bouton - 1
			  {
 
			prix = btns[test-1].value ;
			   }
 
			if(btns[index-2].checked==true) // on sait que le prix CE est juste avant le prix IRCOS donc index du bouton - 2
			{
 
				prix = btns[test-2].value ;
			}
 
 
			if(isNaN(qte))
			{
				alert("<?php echo TXT_ERROR_MANY ?>");
			}
 
			if(qte !=null && !isNaN(qte))
			{
			window.location.href="ajout_panier.php?qte="+qte+"&ref="+refArticle+"&prix="+prix; // on passe sur la page qui gère l'ajout dans le panier 
			}
		}

J'ai perdu quelques minutes sur le .checked .. je pensais que c'était .selected pour les radio et la console ne m'affichait aucune erreur... c'est bon à savoir pour les radio comme pour les checkbox, c'est l'attribut .checked qu'il faut utiliser !

Merci à tous ! je peux enfin avancer !

[Oscar Hiboux]

Oui, mais malheureusement en événementiel tu ne peux pas mettre de parenthèses [...] on peut pas mettre btns[i].onclick = AddPanier(i);

En effet, tu ne peux pas l'écrire comme ça. Mais tu peux créer une fonction à la volée et tirer partie des "fermetures" (closures) comme je l'ai présenté dans mon exemple. Je suis conscient que c'est un concept assez avancé et pas forcément facile à aborder mais ton sujet s'y prête vraiment.

Autre concept très intéressant, encore plus avancé, facilité par prototype.js, que tu pourrais mettre en oeuvre dans ton cas : le currying. Si tu es à l'aise en anglais ou que tu as un peu de courage j'aimerais t'indiquer cet article, qui présente le concept (qui n'est pas exclusif à JavaScript, et sera peut-être accessible en Java 1.7 ? Will see...).

Rapidement, ça permet de "figer" la valeur d'un argument d'une fonction pour en faire une nouvelle fonction dont la signature est, de ce fait, réduite d'un argument :

Code :

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

1
2
3
4
5
var add = function(a, b){ return a + b; };
var add5 = add.curry(5);
 
add(5, 2) // retourne 7
add5(14) // retourne 19

C'est typiquement ton cas, où tu souhaites, en quelque sorte, figer la valeur de "i" pour les appels ultérieurs à ta fonction "AddPanier". Ça se présenterait ainsi :

Code :

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

btns[i].onclick = AddPanier.curry(i);

Où "AddPanier" a pour signature :

Code :

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

function AddPanier(i) { ... }

Bon, j'espère que je n'ai pas trop perdu l'auditoire... J'en vois qui ont un drôle de regard

P.S. : tu peux aussi créer des fonctions en faisant :

Code :

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

var add = new Function(["a", "b"], "return a + b;");

C'est plutôt dégueulasse comme truc mais dans des cas extrêmes ça pourrait avoir son utilité (mais c'est le mal ! ).

[MoKeS]

effectivement, ça peut ouvrir de nouvelles possibilités et c'est très intéressant à manipuler... je note tout ça pour une utilisation future !! merci beaucoup