Problème avec Javascript

Par MOS865, il y a 3 ans

Javascript

Bonjour à tous,

Tout d'abord, je remercie toutes les personnes qui vont m'aider à améliorer mon code. Notez que je ne suis pas développeur et que je créé des lignes de code uniquement en dépannage dans le cadre de mes foncions.

J'ai voulu créer un code Javascript pour faire afficher un texte masqué dès que l'on clique sur un texte. Le code fonctionne très bien, le problème est que je vais devoir l'appliquer plusieurs fois sur une même page, et à ce moment là cela ne fonctionne que sur le premier bloc.

En parcourant, j'ai vu que je pourrais éventuellement palier au problèmes en ajoutant tous les ids, mais cela ne fonctionne pas dans mon cas, car je ne code pas directement la page mais je créé un module que j'appelle ensuite dans le CMS pour modifier le texte.

En créant le module, je ne contrôle pas l'Id de mes éléments. J'ai tenté de passer par ElementByClassName mais cela n'a pas fonctionné.

Voici le code HTML

<div id="cta"> Le module texte qui sera utilisé comme bouton </div> <div id="hidden"> Le module texte qui apparaitra au clic </div>

Le code CSS

#hidden{ display: none; }

Le code Javascript

let cta = document.GetElementById("cta"); let hidden = document.GetElementById("hidden"); cta.addEventListener("click", () => { if(getComputedStyle(hidden).display != "none"){ hidden.style.display = "none"; } else { hidden.style.display = "block"; } })

3 réponses

Pitet, il y a 3 ans

Bonjour,

Qu'est-ce qui ne fonctionne pas avec getElementsByClassName ? Tes éléments ont bien une classe cta au lieu d'un id ?

Une autre approche possible avec des classes : https://jsfiddle.net/gafy1z8e/

MOS865, il y a 3 ans

Ton code fonctionne parfaitement !!

Merci beaucoup

MOS865, il y a 3 ans

Et du coup je t'aurais bien balancé mon code avec le ClassName, mais je ne l'ai plus ^^