Discussion :

[Pingi]

Bonjour,
voilà j'ai un petit soucis (en fait il est assez gros vu que je suis dessus depuis des jours), je dois créer dans une cellule d'un tableau :
- un bouton
- en cliquant sur le bouton il affiche un formulaire
- lorsque le formulaire est affiché le bouton disparait

Mon but est donc de pouvoir utiliser la forme 'element.style.display = "none" '
(le site tourne sur Wordpress)

Voici l'arborescence du formulaire:
https://i.gyazo.com/d3edf300761cf9be...c6ffc115f7.png l'élément au dessus du container est la cellule du tableau.

Puis le code en JS:

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
	//stockage en variable du bouton
	var bouton = document.getElementsByClassName("boutonForm");
 
	//stockage en variable du formulaire
	var formulaire = document.querySelectorAll(".column-4 .frm_forms.with_frm_style.frm_style_formidable-style");
	console.log(formulaire);
 
	//fonction d'affichage	
	for (var i = 0; i < bouton.length; i++)
	{
		formulaire[i].style.display = "none";
		bouton[i].onclick = function()
		{
			this.style.display = "none";
			formulaire[i].style.display = "inline-block";
		};
	}

Et enfin le résultat du console.log(formulaire) :
https://i.gyazo.com/d6e04904f28add1d...8082f9c20d.png
J'ai 10 lignes sur mon tableau il me récupère donc les 10 formulaires correspondant donc jusqu'ici tout va bien (de même pour les boutons).

au moment du clic j'obtiens "TypeError: formulaire[i] is undefined".
La boucle me sert à éviter d'ouvrir tout les formulaire si je clic sur un bouton, je dois ouvrir le formulaire correspondant au bouton (c'est à dire sur la même ligne du tableau).
Donc j'ai fais une boucle pour cela, j'ai fais un "typeof" pour chaque "formulaire[i]" qui renvois "object" sauf qu'une fois la boucle terminée, j'obtiens un "undefined".

Il est alors impossible de définir un style.display.

Le pire est que d'un navigateur à l'autre l'élément peut ne pas être sélectionné dès le début, par exemple sur firefox j'arrive a fixer une barre de menu sur le haut de l'écran, sur chrome "menu.style is undefined"

Pourriez-vous éclairer ma lanterne ?

[NoSmoking]

Bonjour,
isolons une partie de ton code

Code :

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

1
2
3
4
5
6
7
8
9
10
	//fonction d'affichage	
	for (var i = 0; i < bouton.length; i++)
	{
		formulaire[i].style.display = "none";
		bouton[i].onclick = function()
		{
			this.style.display = "none";
			formulaire[i].style.display = "inline-block";
		};
	}

la question que tu dois te poser est que vaut i au moment de l’exécution de la fonction, en gros quand tu cliques sur le bouton.

Cela rejoint ce qui se dit dans la
• Comment attribuer à des objets un onclick faisant appel à une variable de boucle ?
ou encore
• Pourquoi l'InfoWindow n'affiche rien quand je clique sur le marker ?

[sekaijin]

Code :

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

1
2
3
4
5
6
7
8
9
10
	//fonction d'affichage	
	for (var i = 0; i < bouton.length; i++)
	{
		formulaire[i].style.display = "none";
		bouton[i].onclick = function()
		{
			this.style.display = "none";
			formulaire[i].style.display = "inline-block";
		};
	}

pour ne pas se casser la tête il suffit d'utiliser des références.
lorsque tu clique sur ton bouton tu connais le bouton mai tu as aussi besoin de son formulaire
et lorsque tu parcours ton for tu connais le formulaire et le bouton.

il te suffit donc de garder une référence au formulaire dans le bouton.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
	//fonction d'affichage	
	for (var i = 0; i < bouton.length; i++)
	{
		formulaire[i].style.display = "none";
		bouton[i].myForm = formulaire[i]; //le formulaire associé à ce bouton
		bouton[i].onclick = function()
		{
			this.style.display = "none";
			this.myForm.style.display = "inline-block";
		};
	}

Tu peux utiliser la portée des variables dans javascript ce qui est efficace.
En utilisant une référence il n'y a aucune ambiguïté
A+JYT

[Pingi]

Je vous remercie pour vos conseils, effectivement cela fonctionne