Impossible de modifier le .style via JS et incompatibilités navigateur
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:
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. :arf:
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" :marteau:
Pourriez-vous éclairer ma lanterne ?
