Récupérer INDEX d'un getElementsByTagName

Version imprimable

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:

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:

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:

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

04/05/2009, 17h19
SpaceFrog

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

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:

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

04/05/2009, 20h44
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:

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.
05/05/2009, 07h49
andry.aime

Salut,

Citation:

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

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

Code:

if(btns[test-1].selected)
05/05/2009, 08h33
SpaceFrog

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

Code:

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

ou le raccourci de andry ;)
05/05/2009, 09h39
MoKeS

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

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 :king:.

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
05/05/2009, 09h50
andry.aime
Mais en paramètre l'objet cible.
Code:

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

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

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

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 ?

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

Code:

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:

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 ! :king::yaisse2:

05/05/2009, 17h48
Oscar Hiboux
Citation:

Envoyé par MoKeS

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. :D

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:

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:

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

Où "AddPanier" a pour signature :

Code:

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 8O

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

Code:

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 ! :twisted:).
06/05/2009, 09h30
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 :king: