Salut à tous, je viens demander un peu d'aide concernant Javascript

J'ai trouvé sur le net un script JS tout simple qui me permet d'afficher/ masquer une div, le voilà :

function visibilite(thingId)
        {
            var targetElement;
            targetElement = document.getElementById(thingId) ;
             if (targetElement.style.display == "none" )
            {
                targetElement.style.display = "" ;
            } 
            else {
                targetElement.style.display = "none" ;
            }
        }

Et le code qui me permet d'appeler cette fonction :

<a href="javascript:visibilite('la_div_que_je_veux_masquer');">Afficher / Masquer les options</a>

Ce que je souhaite, c'est que mon lien, en l’occurrence Afficher / Masquer les options (avouez que c'est moche) tienne compte de l'état de la div et donc mette "Modifier" si la div est invisible et "Annuler" si la div est visible.

J'espère que j'ai été suffisamment clair et que vous pourrez me donner un petit coup de main pour finaliser ce script. D'avance merci, cordialement, Natà.

Salut,

Je vais commencer par râler mais ça ira mieux après :

Ce que tu demande ici est la base de la base de la base !
Je peux donc en déduire que tu n'a lu aucun tutos.

Deuxio, on ne met jamais de javascript dans l'attribut href d'une balise <a>. Utitlise l'événement onclick. (au passage "javascript:..." ne sert à rien)

Voilà, maintenant mode gentil :

Le javascript permet des modifications sur tous les éléments d'une page web. Il utilise l'arbre DOM pour accédés à ces éléments.
Par exemple : document.getElementById("box") retourne l'élément avec l'id "box". Fastoche

Une fois qu'un élément est sélectionné, on peut le modifié via ces attributs. Le plus compliqué étant de les connaître. Dans ton cas c'est "innerHTML" (le contenue de la balise) qui t’intéresse.
Les attributs sont accessible simplement par element.attribut

Je récapitule :

• Récupéré l'élément via DOM
• Modifié l'attribut innerHTML
• Mettre tout ça au bon endroit dans ta fonction

Salut, merci de t'intéresser à mon soucis.

Alors pour ma défense, non c'est vrai je n'ai pas lu les tutos, et j'ai clairement précisé que j'avais trouvé ce script sur le net.
D'autre part je n'ai pas l'intention de développer en JS, je souhaite juste intégrer cette petite fonction à mon site, c'est comme si j'avais besoin de connaitre la traduction d'un mot en Turque et que tu me répondais d'apprendre la langue entière...

Citation

Deuxio, on ne met jamais de javascript dans l'attribut href d'une balise <a>. Utitlise l'événement onclick. (au passage "javascript:..." ne sert à rien)

Comme je l'ai dit j'ai pompé ce code, il n'est pas de moi et ne connaissant pas grand chose au JS je n'ai pas pu relever cette erreur, mais merci de me l'avoir fait remarquer.

Pour ceux à qui ça peut servir, voilà ce que j'ai trouvé:

<SCRIPT language="Javascript">
                        function afficher_masquer() {  
                            if (document.getElementById("test").innerHTML == "Masquer les options")
                            {
                                document.getElementById("test").innerHTML ="Afficher les options";  
                            }
                            else
                            {
                                document.getElementById("test").innerHTML ="Masquer les options";  
                            }
                        }
</SCRIPT>

Et en html :

<div id="test" onclick="afficher_masquer();">Afficher les options</div>

Je sais que j'y suis allé un peu fort mais c'est plus pour toutes les questions en générales que pour ton cas bien précis.

Bon j'te fais la version correcte commenté (comme ça tu connais ton mot en turc et en plus tu sais comment ça se prononce )

<!-- Voici un <a> qui respect les standart  -->
<a href="#" onclick="switchDisplay();">Afficher/Cacher les infos</a>
<div id="infos">Lorem ipsum ...</div>
<!-- si tu veux qu'elle soit caché par default ajoute style="display:none" -->

function switchDisplay(){ // notre fonction appelé à chaque clic sur le <a>
  var div = document.getElementById("infos"); // on récupère la <div> dans la page
  if(div.style.display == "none"){ // si elle n'est pas afficher
    div.style.display = ""; // on l'affiche (logique  )
  }
  else{ // sinon
    div.style.display = "none"; // bien on la cache
  }
}

Bonne journée

Moi je ne comprends pas,ça ne marche pas, désolé

Quand j'y suis le "Lorem ipsum" est écrit en dessous du lien,et quand je clique sur le lien il ne me l'enlève pas...

<html> 
 <body>
  <!-- Voici un <a> qui respect les standart  -->
  <a href="#" onclick="switchDisplay();">Afficher/Cacher les infos</a>
    <div id="infos" style="display:none">Lorem ipsum ...</div>
       <!-- si tu veux qu'elle soit caché par default ajoute style="display:none" -->
 
   <script type="text\javascript">
    
    // Méthode pour changer la visiblité d'une balise dont l'ID est passée en paramètre
    function switchDisplay(){ // notre fonction appelé à chaque clic sur le <a>	
	var div = document.getElementById("infos"); // on récupère la <div> dans la page
	alert('Est passe');
    	if(div.style.display == "none"){ // si elle n'est pas afficher
    		div.style.display = ""; // on l'affiche (logique  )
    	}
    	else{ // sinon
    		div.style.display = "none"; // bien on la cache
    	}
    }

   </script>
  </body>
</html>

Il ne m'ouvre même pas la boite d'alerte que j'ai rajouté d'ailleurs, à croire qu'il passe pas dans la fonction.

Merci d'avance de votre aide

A part ta faute de frappe au niveau du style="display:none" je comprends pas trop c'qui c'est passé ...

J'ai réécrit la même chose et ça marche Ôo (aparemment un caractère fantôme dans type="text/javascript")

<html> 
 <body>
  <!-- Voici un <a> qui respect les standart  -->
  <a href="#" onclick="switchDisplay();">Afficher/Cacher les infos</a>
    <div id="infos"  style="display:none">Lorem ipsum ...</div>
       <!-- si tu veux qu'elle soit caché par default ajoute style="display:none" -->
 
   <script type="text/javascript">
    
    // Méthode pour changer la visiblité d'une balise dont l'ID est passée en paramètre
    function switchDisplay(){ // notre fonction appelé à chaque clic sur le <a>	
	var div = document.getElementById("infos"); // on récupère la <div> dans la page
    	if(div.style.display == "none"){ // si elle n'est pas afficher
    		div.style.display = ""; // on l'affiche (logique  )
    	}
    	else{ // sinon
    		div.style.display = "none"; // bien on la cache
    	}
    }

   </script>
  </body>
</html>

Lol si maintenant ça marche en remplaçant avec ta version...

Bon ne cherchons pas plus loin...Merci beaucoup

text/javascript et pas text\javascript .....

Hooo en effet bien vu (t'a l'oeil )

A force de debugguer, on repère ça assez vite

En effet, Merci beaucoup...
Faut que je fasse attention à ce que j'écris et que je me relise...^^