Sujet Précédent Sujet Suivant

Pb javascript, plusieurs fonctions onclick

Résolu/Fermé
Znojmo - 3 oct. 2012 à 01:15
Soulitude Messages postés 25 Date d'inscription lundi 1 octobre 2012 Statut Membre Dernière intervention 4 octobre 2012 - 4 oct. 2012 à 07:49
Bonjour,

Je veux faire un site web pour consulter un livre, avec une navigation pratique. J'ai donc décidé qu'il y aurait un menu à gauche pour choisir les chapitres, parties, sections, et une partie à droite où le texte apparaît.

Étant donné que je n'ai jamais fait ça, j'ai fait un test en faisant une petite page répétant mon principe, avec 3 chapitres, 3 parties par chapitre et 3 sections par partie.

Et devinez quoi... roulement de tambour................. ça ne fonctionne pas!

J'ai seulement codé le premier chapitre à date. Avec ce que j'ai fait, d'après ma compréhension actuelle, on devrait voir apparaître le nom de la section "1.1.2, 1.2.3..." à droite. C'est ma façon, dans cette page de pratique, de voir que le texte que je mettrai à la place de ces chiffres (ex. 1.1.2) apparaîtra.

Jusqu'ici, je n'ai codé que le chapitre 1. La partie 1 fonctionne, mais vous pouvez voir si vous copiez-collez ce code dans une page que pour les parties 2 et 3, c'est toute la partie 1 qui apparaît à droite :

----------------------------------------------------------------------------

<html>

<head>


<script type="text/javascript" language="javascript">

<!--
function chap1()
{
document.getElementById("chap1").style.display="inherit";
document.getElementById("chap2").style.display="none";
document.getElementById("chap3").style.display="none";
}
function chap2()
{
document.getElementById("chap1").style.display="none";
document.getElementById("chap2").style.display="inherit";
document.getElementById("chap3").style.display="none";
}
function chap3()
{
document.getElementById("chap1").style.display="none";
document.getElementById("chap2").style.display="none";
document.getElementById("chap3").style.display="inherit";
}


function part1()
{
document.getElementById("part1").style.display="inherit";
document.getElementById("part2").style.display="none";
document.getElementById("part3").style.display="none";
}
function part2()
{
document.getElementById("part1").style.display="none";
document.getElementById("part2").style.display="inherit";
document.getElementById("part3").style.display="none";
}
function part3()
{
document.getElementById("part1").style.display="none";
document.getElementById("part2").style.display="none";
document.getElementById("part3").style.display="inherit";
}


function sec1()
{
document.getElementById("sec1").style.display="inherit";
document.getElementById("sec2").style.display="none";
document.getElementById("sec3").style.display="none";
}
function sec2()
{
document.getElementById("sec1").style.display="none";
document.getElementById("sec2").style.display="inherit";
document.getElementById("sec3").style.display="none";
}
function sec3()
{
document.getElementById("sec1").style.display="none";
document.getElementById("sec2").style.display="none";
document.getElementById("sec3").style.display="inherit";
}

//-->


</script>


</head>

<body>


<div id="boutons" style="position:absolute; left:20px;">


<div name="chap1">

<div name="part1">

<div name="sec1">
<a onclick="chap1();part1();sec1();">1.1.1</a>
</div>

<div name="sec2">
<a onclick="chap1();part1();sec2();">1.1.2</a>
</div>

<div name="sec3">
<a onclick="chap1();part1();sec3();">1.1.3</a>
</div>

</div>



<div name="part2">

<div name="sec1">
<a onclick="chap1();part2();sec1();">1.2.1</a>
</div>

<div name="sec2">
<a onclick="chap1();part2();sec2();">1.2.2</a>
</div>

<div name="sec3">
<a onclick="chap1();part2();sec3();">1.2.3</a>
</div>

</div>



<div name="part3">

<div name="sec1">
<a onclick="chap1();part3();sec1();">1.3.1</a>
</div>

<div name="sec2">
<a onclick="chap1();part3();sec2();">1.3.2</a>
</div>

<div name="sec3">
<a onclick="chap1();part3();sec3();">1.3.3</a>
</div>

</div>

</div>






<div name="chap2">

<div name="part1">

<div name="sec1">
2.1.1
</div>

<div name="sec2">
2.1.2
</div>

<div name="sec3">
2.1.3
</div>

</div>



<div name="part2">

<div name="sec1">
2.2.1
</div>

<div name="sec2">
2.2.2
</div>

<div name="sec3">
2.2.3
</div>

</div>



<div name="part3">

<div name="sec1">
2.3.1
</div>

<div name="sec2">
2.3.2
</div>

<div name="sec3">
2.3.3
</div>

</div>

</div>





<div name="chap3">

<div name="part1">

<div name="sec1">
3.1.1
</div>

<div name="sec2">
3.1.2
</div>

<div name="sec3">
3.1.3
</div>

</div>



<div name="part2">

<div name="sec1">
3.2.1
</div>

<div name="sec2">
3.2.2
</div>

<div name="sec3">
3.2.3
</div>

</div>



<div name="part3">

<div name="sec1">
3.3.1
</div>

<div name="sec2">
3.3.2
</div>

<div name="sec3">
3.3.3
</div>

</div>

</div>


</div>





<div id="texte" style="position:absolute; left:80px;">


<div id="chap1">

<div id="part1">

<div id="sec1">
1.1.1
</div>

<div id="sec2">
1.1.2
</div>

<div id="sec3">
1.1.3
</div>

</div>



<div id="part2">

<div id="sec1">
1.2.1
</div>

<div id="sec2">
1.2.2
</div>

<div id="sec3">
1.2.3
</div>

</div>



<div id="part3">

<div id="sec1">
1.3.1
</div>

<div id="sec2">
1.3.2
</div>

<div id="sec3">
1.3.3
</div>

</div>

</div>






<div id="chap2">

<div id="part1">

<div id="sec1">
2.1.1
</div>

<div id="sec2">
2.1.2
</div>

<div id="sec3">
2.1.3
</div>

</div>



<div id="part2">

<div id="sec1">
2.2.1
</div>

<div id="sec2">
2.2.2
</div>

<div id="sec3">
2.2.3
</div>

</div>



<div id="part3">

<div id="sec1">
2.3.1
</div>

<div id="sec2">
2.3.2
</div>

<div id="sec3">
2.3.3
</div>

</div>

</div>





<div id="chap3">

<div id="part1">

<div id="sec1">
3.1.1
</div>

<div id="sec2">
3.1.2
</div>

<div id="sec3">
3.1.3
</div>

</div>



<div id="part2">

<div id="sec1">
3.2.1
</div>

<div id="sec2">
3.2.2
</div>

<div id="sec3">
3.2.3
</div>

</div>



<div id="part3">

<div id="sec1">
3.3.1
</div>

<div id="sec2">
3.3.2
</div>

<div id="sec3">
3.3.3
</div>

</div>

</div>


</div>










</body>
</html>


-------------------------------------------------------------------------


Ne faites pas attention à tout ce qui manque dans mon code, c'est seulement un test.

Quelqu'un a une idée de mon problème?

Merci.



6 réponses

Réponse 1 / 6
Soulitude Messages postés 25 Date d'inscription lundi 1 octobre 2012 Statut Membre Dernière intervention 4 octobre 2012 7
Modifié par Soulitude le 3/10/2012 à 08:02
Salut, pour te simplifier la vie, a ta place je donnerai la même classe a tout les éléments qui peuvent être caché.
Genre la classe "cache".

et tu fais une fonction en javascript qui désaffiche toute tes les éléments de cette classe avant d'afficher un élément particulier en utilisant son id.

Voici une portion de code javascript fais de tête (donc que je n'ai pas testé) qui t'aiderai beaucoup, ça t'évite de faire une fonction par chapitre. 

function desafficher_tout(class) { 
     var tab_class = document.getElementsByClassName(class); 
     for (var i=0;i<tab_class.length;i++) {
        tab_class[i].style.display="none"; 
     } 
} 

function afficher(id) { 
    document.getElementById(id).style.display="block"; 
}


La premiere fonction cache tout les éléments de la class "class".
La seconde affiche l'élément ayant l'id "id".

Voila.
1
Réponse 2 / 6
Soulitude Messages postés 25 Date d'inscription lundi 1 octobre 2012 Statut Membre Dernière intervention 4 octobre 2012 7
Modifié par Soulitude le 3/10/2012 à 18:15
Non puisque l'id est passé en paramètre, donc tu n'utilises que 2 fonctions pour ton travail d'affichage.

par exemple si t'as un élément qui au clic doit afficher une partie, pour reprendre mes fonctions de mon post précédent:

tu feras un truc du genre: 

onClick="afficher('id_de_ton_élément_html_a_afficher');"


Par contre :
"d'autres trucs qui ne doivent pas apparaître apparaîtront parce qu'ils auront le même id."

un id est utilisé pour identifier un élément, si tu veux que plusieurs éléments soit identifier de la même façon tu utiliseras plutôt une classe.
1
Réponse 3 / 6
magicshark Messages postés 399 Date d'inscription mardi 27 juillet 2010 Statut Membre Dernière intervention 6 mai 2014 13
3 oct. 2012 à 21:31 
function desafficher_tout(classe) { 
var tab_class = document.getElementsByClassName(classe); 
for (var i=0;i<tab_class.length;i++) { 
tab_class[i].style.display="none"; 
} 
}


tu noteras que la variable a prit un "e" a la fin en effet le mot "class" est un mot reservé
1
Znojmo
3 oct. 2012 à 23:24
Wow merci magicshark!

Je ne comprends pas tout mais ça fonctionne. Maintenant je vais essayer d'appliquer la fonction "afficher(id)" de Soulitude. Je continue ce topic dans max 2 heures, soit pour dire ce qui ne va pas, soit pour le clore!
0
Réponse 4 / 6
Znojmo
3 oct. 2012 à 17:02
Merci pour la suggestion, mais selon toute vraisemblance, avec cette solution, ça prendrait une fonction pour chaque section à faire apparaître, qui aura un id différent non? Étant donné que mon livre est beaucoup plus vaste que mon test posté ici, il comporte environ 80 sections. Donc, il y aura environ 80 exemplaires de cette fonction, chacune avec un id différent?

Remarque, je n'ai pas beaucoup d'expérience avec javascript, alors si tu me dis que cette solution est la meilleure, je vais l'essayer et peut-être l'utiliser... je suis totalement dépendant des avis qu'on me donne!

Note : Si j'ai mis "inherit" au lieu de "block", c'est parce que je souhaite réutiliser la fonction pour une autre partie du site (le résumé d'un autre livre). Je mettrais donc display="block" pour les grandes parties du site mais "inherit" pour les autres (pour ne pas qu'une section venant d'une autre partie apparaisse parce qu'elle a le même id...). J'espère que je suis clair... en gros je veux mettre inherit parce que si je mets "block", d'autres trucs qui ne doivent pas apparaître apparaîtront parce qu'ils auront le même id.
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 6
Znojmo
3 oct. 2012 à 20:29
Je comprends!

Wow, merci beaucoup! Je découvre vraiment comment fonctionne Javascript, là. Je n'avais pas compris qu'on pouvait mettre ce qu'on voulait entre les parenthèses dans le corps. Ça va me simplifier énormément la vie!

Par contre, j'ai essayé de le coder, mais je sens que c'est mon manque d'expérience qui me bloque sérieusement... parce que je suis encore bloqué au desafficher_tout. J'ai essayé de plusieurs manières avec différents trucs entre les parenthèses...

Je sais que je devrais idéalement m'y connaître plus pour coder en javascript, mais est-ce que ce serait abuser de simplement jeter un coup d'oeil à mon code et me dire si à première vue tu vois une erreur? Parce que j'ai l'impression que j'ai simplement fait une erreur que tu pourrais probablement voir facilement.

Note : j'essaie seulement de désafficher tout pour l'instant



Voici mon code à date :

--------------------------------------------------------

<html>

<head>


<script type="text/javascript" language="javascript">

<!--

function desafficher_tout(class) {
var tab_class = document.getElementsByClassName(class);
for (var i=0;i<tab_class.length;i++) {
tab_class[i].style.display="none";
}
}

//-->


</script>


</head>

<body>


<div id="boutons" style="position:absolute; left:20px;">


<div name="chap1">

<div name="part1">

<div name="sec1">
<a onclick="desafficher_tout('sec');">1.1.1</a>
</div>

<div name="sec2">
<a onclick="desafficher_tout('sec');">1.1.2</a>
</div>

<div name="sec3">
<a onclick="desafficher_tout('sec');">1.1.3</a>
</div>

</div>



<div name="part2">

<div name="sec1">
<a onclick="desafficher_tout('sec');">1.2.1</a>
</div>

<div name="sec2">
<a onclick="desafficher_tout('sec');">1.2.2</a>
</div>

<div name="sec3">
<a onclick="desafficher_tout('sec');">1.2.3</a>
</div>

</div>



<div name="part3">

<div name="sec1">
<a onclick="desafficher_tout('sec');">1.3.1</a>
</div>

<div name="sec2">
<a onclick="desafficher_tout('sec');">1.3.2</a>
</div>

<div name="sec3">
<a onclick="desafficher_tout('sec');">1.3.3</a>
</div>

</div>

</div>






<div name="chap2">

<div name="part1">

<div name="sec1">
2.1.1
</div>

<div name="sec2">
2.1.2
</div>

<div name="sec3">
2.1.3
</div>

</div>



<div name="part2">

<div name="sec1">
2.2.1
</div>

<div name="sec2">
2.2.2
</div>

<div name="sec3">
2.2.3
</div>

</div>



<div name="part3">

<div name="sec1">
2.3.1
</div>

<div name="sec2">
2.3.2
</div>

<div name="sec3">
2.3.3
</div>

</div>

</div>





<div name="chap3">

<div name="part1">

<div name="sec1">
3.1.1
</div>

<div name="sec2">
3.1.2
</div>

<div name="sec3">
3.1.3
</div>

</div>



<div name="part2">

<div name="sec1">
3.2.1
</div>

<div name="sec2">
3.2.2
</div>

<div name="sec3">
3.2.3
</div>

</div>



<div name="part3">

<div name="sec1">
3.3.1
</div>

<div name="sec2">
3.3.2
</div>

<div name="sec3">
3.3.3
</div>

</div>

</div>


</div>





<div id="texte" style="position:absolute; left:80px;">


<div id="chap1">

<div id="part1">

<div id="sec1" class="sec">
1.1.1
</div>

<div id="sec2" class="sec">
1.1.2
</div>

<div id="sec3" class="sec">
1.1.3
</div>

</div>



<div id="part2">

<div id="sec1" class="sec">
1.2.1
</div>

<div id="sec2" class="sec">
1.2.2
</div>

<div id="sec3" class="sec">
1.2.3
</div>

</div>



<div id="part3">

<div id="sec1" class="sec">
1.3.1
</div>

<div id="sec2" class="sec">
1.3.2
</div>

<div id="sec3" class="sec">
1.3.3
</div>

</div>

</div>






<div id="chap2">

<div id="part1">

<div id="sec1" class="sec">
2.1.1
</div>

<div id="sec2" class="sec">
2.1.2
</div>

<div id="sec3" class="sec">
2.1.3
</div>

</div>



<div id="part2">

<div id="sec1" class="sec">
2.2.1
</div>

<div id="sec2" class="sec">
2.2.2
</div>

<div id="sec3" class="sec">
2.2.3
</div>

</div>



<div id="part3">

<div id="sec1" class="sec">
2.3.1
</div>

<div id="sec2" class="sec">
2.3.2
</div>

<div id="sec3" class="sec">
2.3.3
</div>

</div>

</div>





<div id="chap3">

<div id="part1">

<div id="sec1" class="sec">
3.1.1
</div>

<div id="sec2" class="sec">
3.1.2
</div>

<div id="sec3" class="sec">
3.1.3
</div>

</div>



<div id="part2">

<div id="sec1" class="sec">
3.2.1
</div>

<div id="sec2" class="sec">
3.2.2
</div>

<div id="sec3" class="sec">
3.2.3
</div>

</div>



<div id="part3">

<div id="sec1" class="sec">
3.3.1
</div>

<div id="sec2" class="sec">
3.3.2
</div>

<div id="sec3" class="sec">
3.3.3
</div>

</div>

</div>


</div>










</body>
</html>


-----------------------------------------------------
0
magicshark Messages postés 399 Date d'inscription mardi 27 juillet 2010 Statut Membre Dernière intervention 6 mai 2014 13
3 oct. 2012 à 21:26
pourquoi tu as des attribut name dans tes div ? ça sert pour les formulaire afin de nommer l'information que tu envois
0
Znojmo
3 oct. 2012 à 23:17
Je ne sais pas si c'est brillant, mais j'ai mis tout de suite des attributs name parce que plus tard, cette section-là à gauche sera un menu-accordéon, et je crois que je pourrais avoir besoin de ces "name" pour dérouler et enrouler les cellules (qui ne sont pas encore des cellules, mais je vais changer ça plus tard). Qu'en penses-tu?
0
Réponse 6 / 6
Znojmo
4 oct. 2012 à 00:25
Tout fonctionne à merveille, comme je le voulais.

Merci à ceux qui m'ont répondu, vous êtes vraiment efficaces!

Beaucoup de choses ont changé dans mon code depuis le début! Et pour le Name, je l'ai enlevé et je l'ai remplacé par un id...

Bon voici mon code actuel pour ceux que ça intéresse, je crois que ça pourrait donner un bon exemple à quelqu'un à quelque part un jour dans une situation quelconque de comment on peut changer le texte d'une section centrale avec des menus et des sous-menus.

-----------------------------------------------------------

<html>

<head>


<script type="text/javascript" language="javascript">

<!--

function desafficher(classe)
{
var tab_class = document.getElementsByClassName(classe);
for (var i=0;i<tab_class.length;i++) {
tab_class[i].style.display="none";
}
}

function afficher(id)
{
document.getElementById(id).style.display="block";
}


//-->


</script>


</head>

<body>


<div id="boutons" style="position:absolute; left:20px;">


<div id="chap1">

<div id="part1">

<div id="sec1">
<a onclick="desafficher('sec');afficher('1.1.1');">1.1.1</a>
</div>

<div id="sec2">
<a onclick="desafficher('sec');afficher('1.1.2');">1.1.2</a>
</div>

<div id="sec3">
<a onclick="desafficher('sec');afficher('1.1.3');">1.1.3</a>
</div>

</div>



<div id="part2">

<div id="sec1">
<a onclick="desafficher('sec');afficher('1.2.1');">1.2.1</a>
</div>

<div id="sec2">
<a onclick="desafficher('sec');afficher('1.2.2');">1.2.2</a>
</div>

<div id="sec3">
<a onclick="desafficher('sec');afficher('1.2.3');">1.2.3</a>
</div>

</div>



<div id="part3">

<div id="sec1">
<a onclick="desafficher('sec');afficher('1.3.1');">1.3.1</a>
</div>

<div id="sec2">
<a onclick="desafficher('sec');afficher('1.3.2');">1.3.2</a>
</div>

<div id="sec3">
<a onclick="desafficher('sec');afficher('1.3.3');">1.3.3</a>
</div>

</div>

</div>






<div id="chap2">

<div id="part1">

<div id="sec1">
<a onclick="desafficher('sec');afficher('2.1.1');">2.1.1
</div>

<div id="sec2">
<a onclick="desafficher('sec');afficher('2.1.2');">2.1.2
</div>

<div id="sec3">
<a onclick="desafficher('sec');afficher('2.1.3');">2.1.3
</div>

</div>



<div id="part2">

<div id="sec1">
<a onclick="desafficher('sec');afficher('2.2.1');">2.2.1
</div>

<div id="sec2">
<a onclick="desafficher('sec');afficher('2.2.2');">2.2.2
</div>

<div id="sec3">
<a onclick="desafficher('sec');afficher('2.2.3');">2.2.3
</div>

</div>



<div id="part3">

<div id="sec1">
<a onclick="desafficher('sec');afficher('2.3.1');">2.3.1
</div>

<div id="sec2">
<a onclick="desafficher('sec');afficher('2.3.2');">2.3.2
</div>

<div id="sec3">
<a onclick="desafficher('sec');afficher('2.3.3');">2.3.3
</div>

</div>

</div>





<div id="chap3">

<div id="part1">

<div id="sec1">
<a onclick="desafficher('sec');afficher('3.1.1');">3.1.1
</div>

<div id="sec2">
<a onclick="desafficher('sec');afficher('3.1.2');">3.1.2
</div>

<div id="sec3">
<a onclick="desafficher('sec');afficher('3.1.3');">3.1.3
</div>

</div>



<div id="part2">

<div id="sec1">
<a onclick="desafficher('sec');afficher('3.2.1');">3.2.1
</div>

<div id="sec2">
<a onclick="desafficher('sec');afficher('3.2.2');">3.2.2
</div>

<div id="sec3">
<a onclick="desafficher('sec');afficher('3.2.3');">3.2.3
</div>

</div>



<div id="part3">

<div id="sec1">
<a onclick="desafficher('sec');afficher('3.3.1');">3.3.1
</div>

<div id="sec2">
<a onclick="desafficher('sec');afficher('3.3.2');">3.3.2
</div>

<div id="sec3">
<a onclick="desafficher('sec');afficher('3.3.3');">3.3.3
</div>

</div>

</div>


</div>





<div id="texte" style="position:absolute; left:80px;">


<div>

<div>

<div id="1.1.1" class="sec">
1.1.1
</div>

<div id="1.1.2" class="sec">
1.1.2
</div>

<div id="1.1.3" class="sec">
1.1.3
</div>

</div>



<div>

<div id="1.2.1" class="sec">
1.2.1
</div>

<div id="1.2.2" class="sec">
1.2.2
</div>

<div id="1.2.3" class="sec">
1.2.3
</div>

</div>



<div>

<div id="1.3.1" class="sec">
1.3.1
</div>

<div id="1.3.2" class="sec">
1.3.2
</div>

<div id="1.3.3" class="sec">
1.3.3
</div>

</div>

</div>






<div>

<div>

<div id="2.1.1" class="sec">
2.1.1
</div>

<div id="2.1.2" class="sec">
2.1.2
</div>

<div id="2.1.3" class="sec">
2.1.3
</div>

</div>



<div>

<div id="2.2.1" class="sec">
2.2.1
</div>

<div id="2.2.2" class="sec">
2.2.2
</div>

<div id="2.2.3" class="sec">
2.2.3
</div>

</div>



<div>

<div id="2.3.1" class="sec">
2.3.1
</div>

<div id="2.3.2" class="sec">
2.3.2
</div>

<div id="2.3.3" class="sec">
2.3.3
</div>

</div>

</div>





<div>

<div>

<div id="3.1.1" class="sec">
3.1.1
</div>

<div id="3.1.2" class="sec">
3.1.2
</div>

<div id="3.1.3" class="sec">
3.1.3
</div>

</div>



<div>

<div id="3.2.1" class="sec">
3.2.1
</div>

<div id="3.2.2" class="sec">
3.2.2
</div>

<div id="3.2.3" class="sec">
3.2.3
</div>

</div>



<div>

<div id="3.3.1" class="sec">
3.3.1
</div>

<div id="3.3.2" class="sec">
3.3.2
</div>

<div id="3.3.3" class="sec">
3.3.3
</div>

</div>

</div>


</div>










</body>
</html>

---------------------------------------------------------
0
Soulitude Messages postés 25 Date d'inscription lundi 1 octobre 2012 Statut Membre Dernière intervention 4 octobre 2012 7
4 oct. 2012 à 07:49
Bien joué ;
C'est en développant qu'on devient développeur ;)
0

Discussions similaires

Javascript Arrondi à 2 chiffres après la virgule
jeremy -
gravityaerox -

12 réponses
java script error in the main process
ceciel2307 -
Thibaut -

3 réponses
Nodejs.exe est-ce un virus
Maverik1956 -
Malekal_morte- -

13 réponses
Afficher/Enlever un div onclick
Richieddy -
Mihawk -

7 réponses
[Javascript] Tables de Multiplication
pigeonus -
hachim -

6 réponses