Partage

Petite question ou plutôt petit problème sur texte caché...

7 avril 2011 à 18:08:00

Bonjour à tous

Voila j'ai une question ou plutot un petit problème que je n'arrive pas à corrigé sur mon code

Enfaite j'ai fait plusieurs textes qui sont caché par automatiquement, et à l'action d'un bouton cela montre le texte caché.
Le problème c'est que j'ai plusieurs textes à caché, et le truc c'est qu'il n'y a que le premiers bouton qui marche est qui actionne les autres :'(

Voici mon code

<div id="profile-core">

 <!--<span class="account-text">My account</span>-->
  
   <div class="systeme_onglets">
      
        <div class="onglets">
        <div class="account-text">My account</div>
        <br/>
            <span class="onglet_0 onglet" id="onglet_settings" onclick="javascript:change_onglet('settings');">Settings</span></br>
            <span class="onglet_0 onglet" id="onglet_shop" onclick="javascript:change_onglet('shop');">Shop</span>
            <span class="onglet_0 onglet" id="onglet_video" onclick="javascript:change_onglet('video');">Video</span>
            <span class="onglet_0 onglet" id="onglet_music" onclick="javascript:change_onglet('music');">Music</span>
            <span class="onglet_0 onglet" id="onglet_chat" onclick="javascript:change_onglet('chat');">Chat</span>
            <span class="onglet_0 onglet" id="onglet_language" onclick="javascript:change_onglet('language');">Language</span>
            <span class="onglet_0 onglet" id="onglet_notifications" onclick="javascript:change_onglet('notifications');">Notifications</span>
            <span class="onglet_0 onglet" id="onglet_payments" onclick="javascript:change_onglet('payments');">Payments</span>
            <span class="onglet_0 onglet" id="onglet_mobile" onclick="javascript:change_onglet('mobile');">Mobile</span>
        </div>
        
        <div class="contenu_onglets">
            <div class="contenu_onglet" id="contenu_onglet_settings">
            	<br/>
                <br/>
				<div class="title">Name</div>
                <div class="title2" id="display" onclick="javascript:afficher_cacher('text1');">Change</div>
                <div class="ligne-settings"><hr/></div>
                <div id="text1" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nisl. Phasellus quis nulla
                 sit amet leo pretium tincidunt. Quisque eleifend augue quis urna. Curabitur rhoncus quam ac odio. In a nisi et purus ferme
                 ntum aliquet. Donec sed leo aliquet lacus sollicitudin rhoncus. Duis ultricies euismod odio. Suspendisse potenti. Cras int
                 erdum, diam quis porta interdum, elit urna tincidunt ipsum, quis pharetra sem dui ac tortor. Cras lacus. Lorem ipsum dolor
                  sit amet, consectetur adipiscing elit. Nullam ipsum. Aliquam volutpat turpis at ante. Lorem ipsum dolor sit amet, consecte
                  tur adipiscing elit.<br /><br /></div>
               
      
              
                <br/>
                <div class="title">First Name</div>
                <div class="title2" id="display" onclick="javascript:afficher_cacher('text2');" >Change</div>
                <div class="ligne-settings"><hr/></div>
                                <div id="text2" class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nisl. Phasellus quis nulla
                 sit amet leo pretium tincidunt. Quisque eleifend augue quis urna. Curabitur rhoncus quam ac odio. In a nisi et purus ferme
                 ntum aliquet. Donec sed leo aliquet lacus sollicitudin rhoncus. Duis ultricies euismod odio. Suspendisse potenti. Cras int
                 erdum, diam quis porta interdum, elit urna tincidunt ipsum, quis pharetra sem dui ac tortor. Cras lacus. Lorem ipsum dolor
                  sit amet, consectetur adipiscing elit. Nullam ipsum. Aliquam volutpat turpis at ante. Lorem ipsum dolor sit amet, consecte
                  tur adipiscing elit.<br /><br /></div>
               

                <br/>
                <div class="title">Email</div>
                <div class="title2" id="display" onclick="javascript:afficher_cacher('text3');">Change</div>
                <div class="ligne-settings"><hr/></div>
                                <div id="text3" class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nisl. Phasellus quis nulla
                 sit amet leo pretium tincidunt. Quisque eleifend augue quis urna. Curabitur rhoncus quam ac odio. In a nisi et purus ferme
                 ntum aliquet. Donec sed leo aliquet lacus sollicitudin rhoncus. Duis ultricies euismod odio. Suspendisse potenti. Cras int
                 erdum, diam quis porta interdum, elit urna tincidunt ipsum, quis pharetra sem dui ac tortor. Cras lacus. Lorem ipsum dolor
                  sit amet, consectetur adipiscing elit. Nullam ipsum. Aliquam volutpat turpis at ante. Lorem ipsum dolor sit amet, consecte
                  tur adipiscing elit.<br /><br /></div>
               

                <br/>
                <div class="title">Password</div>
                <div class="title2" id="display" onclick="javascript:afficher_cacher('text4');">Change</div>
                <div class="ligne-settings"><hr/></div>
                <div id="text4" class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nisl. Phasellus quis nulla
                 sit amet leo pretium tincidunt. Quisque eleifend augue quis urna. Curabitur rhoncus quam ac odio. In a nisi et purus ferme
                 ntum aliquet. Donec sed leo aliquet lacus sollicitudin rhoncus. Duis ultricies euismod odio. Suspendisse potenti. Cras int
                 erdum, diam quis porta interdum, elit urna tincidunt ipsum, quis pharetra sem dui ac tortor. Cras lacus. Lorem ipsum dolor
                  sit amet, consectetur adipiscing elit. Nullam ipsum. Aliquam volutpat turpis at ante. Lorem ipsum dolor sit amet, consecte
                  tur adipiscing elit.<br /><br /></div>

                <br/>
                <div class="title">Coming Soon</div>
                <div class="title2" id="display" onclick="javascript:afficher_cacher('text5');">Change</div>
                <div class="ligne-settings"><hr/></div>
                <div id="text5" class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nisl. Phasellus quis nulla
                 sit amet leo pretium tincidunt. Quisque eleifend augue quis urna. Curabitur rhoncus quam ac odio. In a nisi et purus ferme
                 ntum aliquet. Donec sed leo aliquet lacus sollicitudin rhoncus. Duis ultricies euismod odio. Suspendisse potenti. Cras int
                 erdum, diam quis porta interdum, elit urna tincidunt ipsum, quis pharetra sem dui ac tortor. Cras lacus. Lorem ipsum dolor
                  sit amet, consectetur adipiscing elit. Nullam ipsum. Aliquam volutpat turpis at ante. Lorem ipsum dolor sit amet, consecte
                  tur adipiscing elit.<br /><br /></div>
               

                <br/>
                <div class="title">Coming Soon</div>
                <div class="title2" id="display" onclick="javascript:afficher_cacher('text6');">Change</div>
                <div class="ligne-settings"><hr/></div>
                <div id="text6" class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nisl. Phasellus quis nulla
                 sit amet leo pretium tincidunt. Quisque eleifend augue quis urna. Curabitur rhoncus quam ac odio. In a nisi et purus ferme
                 ntum aliquet. Donec sed leo aliquet lacus sollicitudin rhoncus. Duis ultricies euismod odio. Suspendisse potenti. Cras int
                 erdum, diam quis porta interdum, elit urna tincidunt ipsum, quis pharetra sem dui ac tortor. Cras lacus. Lorem ipsum dolor
                  sit amet, consectetur adipiscing elit. Nullam ipsum. Aliquam volutpat turpis at ante. Lorem ipsum dolor sit amet, consecte
                  tur adipiscing elit.<br /><br /></div>
               

                <br/>
                <div class="title">Coming Soon</div>
                <div class="title2" id="display" onclick="javascript:afficher_cacher('text7');">Change</div>
                <div class="ligne-settings"><hr/></div>
                <div id="text7" class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nisl. Phasellus quis nulla
                 sit amet leo pretium tincidunt. Quisque eleifend augue quis urna. Curabitur rhoncus quam ac odio. In a nisi et purus ferme
                 ntum aliquet. Donec sed leo aliquet lacus sollicitudin rhoncus. Duis ultricies euismod odio. Suspendisse potenti. Cras int
                 erdum, diam quis porta interdum, elit urna tincidunt ipsum, quis pharetra sem dui ac tortor. Cras lacus. Lorem ipsum dolor
                  sit amet, consectetur adipiscing elit. Nullam ipsum. Aliquam volutpat turpis at ante. Lorem ipsum dolor sit amet, consecte
                  tur adipiscing elit.<br /><br /></div>

                <br/>
                <div class="title">Coming Soon</div>
                <div class="title2" id="display" onclick="javascript:afficher_cacher('text8');">Change</div>
                <div class="ligne-settings"><hr/></div>
                <div id="text8" class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nisl. Phasellus quis nulla
                 sit amet leo pretium tincidunt. Quisque eleifend augue quis urna. Curabitur rhoncus quam ac odio. In a nisi et purus ferme
                 ntum aliquet. Donec sed leo aliquet lacus sollicitudin rhoncus. Duis ultricies euismod odio. Suspendisse potenti. Cras int
                 erdum, diam quis porta interdum, elit urna tincidunt ipsum, quis pharetra sem dui ac tortor. Cras lacus. Lorem ipsum dolor
                  sit amet, consectetur adipiscing elit. Nullam ipsum. Aliquam volutpat turpis at ante. Lorem ipsum dolor sit amet, consecte
                  tur adipiscing elit.<br /><br /></div>
                  
                 <br/>
                 <br/>
   

            </div>
            
            	<script type="text/javascript">
        
                afficher_cacher('text1');
				afficher_cacher('text2');
				afficher_cacher('text3');
				afficher_cacher('text4');
				afficher_cacher('text5');
				afficher_cacher('text6');
				afficher_cacher('text7');
				afficher_cacher('text8');
				
        		</script>
            
        </div>
    </div>
</div>

Et le javascript:

<script type="text/javascript"> 
        function afficher_cacher(id)
		{
        if(document.getElementById(id).style.display=="none")
        {
                document.getElementById(id).style.display="block";
                document.getElementById("display").innerHTML='hide';
				document.getElementById("display").innerHTML='hide';
				
        }
        else
        {
                document.getElementById(id).style.display="none";;
                document.getElementById("display").innerHTML='change';
				document.getElementById("display").innerHTML='change';
        }
        return true;
		}
	</script>

Ou est mon problème ? Chaque texte a le même id ("display") c'est peut être la le problème...

Voila voila

Merci par avance

berseker59

7 avril 2011 à 19:20:50

Salut,

Tu n<as pas besoin d'utiliser le prefixe javascript: dans l<attribut HTML onclick.

De plus, chaque id doit etre unique.

Je dois y aller, je repasse sur le topic.

Berseker59

80n

7 avril 2011 à 22:27:19

Merci, mais que doit-je faire alors? est ce que je dois dupliqué ma fonction JS pour chaque id?

AntoLeNice

7 avril 2011 à 22:32:43

Pourquoi ne pas simplement utiliser du jQuery ?? Une simple fonction toggle() et tout fonctionne, c'est beaucoup plus simple !

80n

7 avril 2011 à 22:35:59

Pourrais tu me dire ce que je dois marqué précisément (je débute juste apres avoir lu les cours sur le sdz)?
J'ai rajouter jquery dans le head mais je ne sais pas ce que je dois rajouter à me fonction...

Anonyme

7 avril 2011 à 23:27:10

Utiliser display1, display2 ... et reprendre le dernier caractère de l'argument text1, text2 (nos=id.substr(4)) ... pour construire le bon identifiant (idd='display'+nos;)

berseker59

8 avril 2011 à 2:14:23

Re-bonjour, tout à l'heure, j'ai du retourner en cour, donc je n'ai pas pu te répondre complètement.

1 - La ligne 13 de code JS à 2 ; à la fin.
2 - La ligne 15 est la même que la ligne 14, je vois pas l'utilité.
3 - Même chose pour les lignes 8 et 7.

4 - En HTML, un seul élément de ta page peut avoir 'display' comme ID.
5 - Au lieu de

<span class="onglet_0 onglet" id="onglet_settings" onclick="javascript:change_onglet('settings');">

ce code fait la même chose et est plus court :

<span class="onglet_0 onglet" id="onglet_settings" onclick="change_onglet('settings');">

Voilà, si tu arrange ça, ca devrait fonctionner si je n'ai rien oublié

Berseker59

80n

8 avril 2011 à 9:10:22

Mais je ne comprend pas, qu'est que je doit mettre à la ligne 13, la 15 la 8 et la 7 ?

Anonyme

8 avril 2011 à 11:23:35

Il manque des points-virgules à la fin de certaines. Ce n'est pas très grave mais pourrait entrainer des dysfonctionnements en comprimant le code...

80n

8 avril 2011 à 17:48:17

Mais qu'est ce que je dois faire exactement??
J'ai essayer de mettre des id différant, j'ai mit:

document.getElementById("display1").innerHTML='change';
document.getElementById("display2").innerHTML='change';
document.getElementById("display3").innerHTML='change';

Mais cela ne fonctionne pas :'(

Golmote

8 avril 2011 à 21:54:51

Mais pourquoi est-ce que tu ne réutilises pas le principe utilisé dans le code que tu avais trouvé à l'origine ? >_<

Btw, mets l'autre sujet en résolu, maintenant que celui-ci est ouvert.

80n

9 avril 2011 à 11:30:58

"Finalement non résolut... enfaite j'ai une dernière petite question voila enfaite j'ai remis la ligne 7 et 12, j'ai crée un id"display" pour chaque texte(même id à chaque fois), mais voila il n'y en à qu'une seul qui marche est qui commende les autres
donc comment faire pour que chacun marche?"

Voila pourquoi je ne le mets pas en résolut, ça fait plusieurs jours que je cherche sans y arriver :'(

HELP

Golmote

9 avril 2011 à 11:47:13

Et où as-tu vu un id "display" écrit plusieurs fois dans le code d'origine ?

Les id des "triggers" c'était "bouton_" suivi de l'id du texte correspondant. Ce qui permettait d'avoir des id différents mais de pouvoir y référer facilement.

80n

11 avril 2011 à 0:37:24

Je n'y arrive pas :'(

Un personne pourrait elle m'aider?

Anonyme

11 avril 2011 à 10:57:32

Hormis les corrections déjà signalées, le code doit être simplifié, en ne passant que les entiers désignant les textes et les containers de contrôle display qui doivent (comme les textes) être numérotés display1, display2 ...etc.

Alors la fonction afficher_cacher deviendrait

function afficher_cacher(n)
		{
        if(document.getElementById('text'+n).style.display=="none") //l'élément textn est caché
        {
                document.getElementById('text'+n).style.display='block';// on le montre
                document.getElementById('display'+n).innerHTML='hide';// On écrit caché 

        }
        else
        {// l'élément est apparent
                document.getElementById('text'+n).style.display='none';// on le cache
                document.getElementById('display'+n).innerHTML='change';// On écrit 'change'

	}
        return false; 
}

80n

11 avril 2011 à 11:29:13

J'ai mit ton copier ton code, mais malheureusement cela ne marche pas :'(

Que vaut 'n' dans mon code?

Anonyme

11 avril 2011 à 12:42:26

L'argument n de la fonction ne vaut rien, il représente seulement un entier dans la définition de la fonction. Il sera d'ailleurs automatiquement transformé en chaîne de caractères par concaténation.

Dans le cas particulier précité, il peut prendre toutes les valeurs entières 1, 2, 3, 4, 5, 6, 7 ou 8 selon que la fonction doit s'appliquer à text1 (et display1), text2 (et display2), text2 (et display2), text3 (et display3), text4 (et display4), text5 (et display5), text7 (et display7) ou encore text8 (et display8).

Autrement dit, il suffit maintenant d'appeler afficher_cacher(1), afficher_cacher(2), afficher_cacher(3) ... etc pour lancer la fonction. Ouf !

80n

11 avril 2011 à 13:04:39

J'ai fait comme tu m'as dit, il y a du mieux mais cela ne marche pas encore, les texte sont bien masqué, il y a bien marqué 'change' MAIS on ne peut pas les ouvrir :'(

Voici le code:

<script type="text/javascript"> 
		function afficher_cacher(n)
		{
        if(document.getElementById('text'+n).style.display=="none") //l'élément textn est caché
        {
                document.getElementById('text'+n).style.display='block';// on le montre
                document.getElementById('display'+n).innerHTML='hide';// On écrit caché 

        }
        else
        {// l'élément est apparent
                document.getElementById('text'+n).style.display='none';// on le cache
                document.getElementById('display'+n).innerHTML='change';// On écrit 'change'

		}
        return false; 
		}
		</script>

<br/>
				<div class="title">Name</div>
                <div class="title2" id="display1" onclick="afficher_cacher('text1');">Change</div>
                <div class="ligne-settings"><hr/></div>
                <div id="text1">
                	<div id="done">
                		<form action="editaccount.php" method="post">
   
          					<span class="subject">Last Name: </span><input id="name-name" type="text" name="name" value="<?php echo htmlspecialchars(UcFirstAndToLower($n));?>" class="autoEmpty"/><br/><br/>
                            <input id="send" type="submit" name="sending-name" value="Save changes" />
                        </form>
                    </div>                          
                </div>
               
      
              
                <br/>
                <div class="title">First Name</div>
                <div class="title2" id="display2" onclick="afficher_cacher('text2');" >Change</div>
                <div class="ligne-settings"><hr/></div>
                <div id="text2" class="text">
                	<div id="done">
                		<form action="editaccount.php" method="post">
   
          					<span class="subject">First Name: </span><input id="first-name" type="text" name="first_name" value="<?php echo htmlspecialchars(UcFirstAndToLower($fn));?>" class="autoEmpty"/><br/><br/>
                            <input id="send" type="submit" name="sending-first" value="Save changes" />
                        </form>
                    </div>        
                </div>
               

                <br/>
                <div class="title">Email</div>
                <div class="title2" id="display3" onclick="afficher_cacher('text3');">Change</div>
                <div class="ligne-settings"><hr/></div>
                <div id="text3" class="text">
                	<div id="done">
                    <span class="subject">Contact Email: </span><?php echo htmlspecialchars($e);?><br/><span class="subjectmsg">Your contact email must be a valid address.</span><br/>
                		<form action="editaccount.php" method="post">
   
          					<br/><span class="name_content">New email: </span><input id="email-email" type="text" name="email" value="Enter a new email adress" class="autoEmpty"/><br/><br/>
                            <input id="send" type="submit" name="sending-email" value="Add New Email" />
                        </form>
                    </div>        
                </div>
               

                <br/>
                <div class="title">Password</div>
                <div class="title2" id="display4" onclick="afficher_cacher('text4');">Change</div>
                <div class="ligne-settings"><hr/></div>
                <div id="text4" class="text">
                <div id="done">
                    <span class="subject"></span> <br/><span class="subjectmsg">Your contact email must be a valid address.</span><br/>
                		<form action="editaccount.php" method="post">
   
          					<br/><span class="contentpass1">Old Password: </span><br/><span class="require1">(Require)</span><input id="password-password" type="password" name="old" value="" class="autoEmpty pass1"/><br/><br/>
                            <span class="contentpass2">New Password: </span><br/> <span class="require2">(Require)</span><input id="password-password" type="password" name="new" value="" class="autoEmpty pass2"/><br/><br/>
                            <span class="contentpass3">Confirm Password: </span><br/> <span class="require3">(Require)</span><input id="password-password" type="password" name="confirm-new" value="" class="autoEmpty pass3"/><br/><br/>
                            <input id="send-pass" type="submit" name="sending-pass" value="Change Password" />
                        </form>
                    </div>       
                </div>

/*/////// Etc jusqu'au texte 8///////*/

Puis le code js:

<script type="text/javascript">
        
                afficher_cacher(1);
				afficher_cacher(2);
				afficher_cacher(3);
				afficher_cacher(4);
				afficher_cacher(5);
				afficher_cacher(6);
				afficher_cacher(7);
				afficher_cacher(8);
				
        		</script>

Qu'est ce qui ne va pas dans mon code?

80n

15 avril 2011 à 13:46:47

UP

svp

80n

20 avril 2011 à 21:44:35

Re up je suis toujours bloqué :'(