Comprendre le bout de code

Version imprimable

1 pièce(s) jointe(s)

Bonjour,

Je suis nouveau dans le js et j'ai pioché un bout de code qui à pour fonction de masqué et afficher du texte.

Je vous transmet le html et le js pour que vous m'aidiez a comprendre le js.
Code:

1 2 3 4 5 <h2 class="sous-titre">What is Frontend Mentor, and how will it help me?</h2><button type="button" onclick="toggle_div(this, 'lire1');" title="Afficher la suite">+</button> <p class="text"><div id="lire1" style="display:none">Frontend Mentor offers realistic coding challenges to help developers improve their frontend coding skills with projects in HTML, CSS, and JavaScript. It's suitable for all levels and ideal for portfolio building.</div></p>
Code:

1 2 3 4 5 6 function toggle_div( btn, id_div ) { btn.innerHTML = (btn.innerHTML == '+')? '-' : '+'; btn.title = (btn.title == 'Afficher la suite')? 'Masquer la suite' : 'Afficher la suite'; document.getElementById( id_div ).style.display = (document.getElementById( id_div ).style.display == 'none')? 'block' : 'none'; }
J'ai bien compris qu'on déclare une variable nommée toggle_div qui prend en paramètre btn(d'où vient-il) et les id de toutes les div. Ensuite btn.innerHTML je n'ai pas compris(je connais innerHTML mais d'où vient btn?), est égal a btn.innerHTML strictement égal à +. ensuite on définit que si c'est + on affiche - et inversement?

La ligne suivante est globalement la même mais pour le texte affiché au survol du +.

Ensuite on récupère les id des div et style.display je n'ai pas compris, est égal à la récupération des id des div avec encore une fois style?display strictement égal à none, et le "?" ainsi que le reste cela reste un mystère pour moi.

Mes interrogations sont peut être bête mais je suis nouveau dans le js et j'ai besoin d'éclaircissement pour avancer. :D

Je mes aussi en une photo du résultat qui est celui demandé.Pièce jointe 649335

17/01/2024, 16h33
mathieu

Citation:

Envoyé par CharlieVan

on déclare une variable nommée toggle_div qui prend en paramètre btn(d'où vient-il)

la fonction "toggle_div" a 2 arguments. cela veut dire qu'au moment de l'appel de la fonction, la valeur du 1er argument va se trouver dans "btn" et la valeur du 2e argument sera récupérable dans la variable "id_div".

pour le ?, c'est un opérateur dont le fonctionnement est expliqué ici :
https://developer.mozilla.org/fr/doc...ional_Operator
17/01/2024, 16h50
labarre2002

Citation:

Ensuite btn.innerHTML je n'ai pas compris(je connais innerHTML mais d'où vient btn?)

c est une notation qui permet de cibler des boutons

Code:

const btn=document.querySelector('button');
17/01/2024, 16h54
CharlieVan

opérateur ? et btn

Je vous remercie j'ai compris "?"

Pour le btn je n'ai jamais déclarer de variable btn c'est pour cela que je me demande quelle information cela renvoie
17/01/2024, 17h08
Doksuri
btn sera le nom de la variable "locale" a la fonction

par exemple
Code:

1 2 3 4 function afficheText(msg) { alert(msg); } afficheText('coucou');
dans mon exemple, mon argument (variable locale s'appelle "msg", mais tu peux l'apeller comme tu veux)
Code:

1 2 3 4 function afficheText(toto) { alert(toto); } afficheText('coucou');
aura le meme resultat
17/01/2024, 17h20
CharlieVan

btn.innerHTML
Si j'ai bien compris innerHTML me permet de créer du contenu HTML sauf que la se n'est pas le cas, si?

est ce que sa voudrait dire que je créer l'élément html btn?

J'ai fais ça a la suite pour vérifier un truc :
Code:

1 2 3 4 let bouton = btn.innerHTML bouton.addEventListener("click", ()=>{ console.log("btncliqué") })
Et quand je clique sur le bouton et vais dans la console rien ne s'affiche

J'ai vraiment du mal avec le btn.innerHTML
17/01/2024, 17h22
CharlieVan

Citation:

Envoyé par Doksuri

...

Donc est il possible de m'expliquer btn.innerHTML, j'ai bien compris que btn c'est ma variable créer avec ma fonction

toute balise est compose d'autres balises... qui n'est rien autre que du HTML
par exemple <button><span>toto</span></button> genere un bouton avec un span dedant qui content la chaine de caractere "toto"

en javascript, il y a 2 manieres de populer dynamiquement un element : soit en creant des balises a la main avec document.createElement(), puis en ajoutant ces balises a l'element

soit en disant au navigateur : voici directement le code HTML a ajouter (avec innerHTML)

donc pour ton bouton btn.innerHTML = (btn.innerHTML == '+')? '-' : '+'; ca dit juste : voici le HTML pour la variable btn

mais la ou ca se complique, c'est que le contenu, est lui-meme compose d'un operateur ternaire (syntaxe courte d'un if/else)
ce meme bout de code aurai pu etre ecrit de la sorte :
Code:

1 2 3 4 5 if(btn.innerHTML == '+') { // si le contenu HTML du bouton est "+" alors.... btn.innerHTML = '-'; // le contenu HTML du bouton est maintenant "-" } else { // sinon btn.innerHTML = '+'; // le contenu HTML du bouton est mainteannt "+" }

17/01/2024, 18h09
labarre2002

A mon humble avis ce code est tarabiscoté tu peux faire simple surtout si tu débutes

voila du savoir :https://www.youtube.com/watch?v=WHod...Ehcu-I&t=3486s

je pense qu il est judicieux que tu écrives ton code plutot que de copier coller du code obtenu sur le net.
fusse t il du code poubelle j applique la meme methode
17/01/2024, 18h26
CharlieVan

Citation:

Envoyé par Doksuri

...

Merci pour ton explication détaillée et pédagogue j'ai compris cette partie la
17/01/2024, 18h27
CharlieVan

Citation:

Envoyé par labarre2002

...

Je vais essayer, la j'essaie de fermer un bouton quand un autre est ouvert et j'ai d'autre complication
17/01/2024, 19h22
unanonyme

btn.innerHTML = (btn.innerHTML == '+')? '-' : '+'; ==> toggle.
17/01/2024, 20h45
domi65
Code:

1 2 3 4 let bouton = btn.innerHTML bouton.addEventListener("click", ()=>{ console.log("btncliqué") })
btn.innerHTML est une propriété de btn. C'est une chaine de caractères.
Tu peux tester pour t'en convaincre

Code:

alert(typeof bouton)

Ce n'est pas du tout un élément HTML.
Tu ne peux donc pas poser un écouteur dessus.
18/01/2024, 08h52
CharlieVan

Je te remercie ce morceau de code est comme mon ancien mais en utilisant d'ancien terme
Seulement voila, ca ne fonctionne que sur mon premier bouton
J'ai aussi essayer en récupérant les class monBouton mais j'arrive au même résultat. La question étant, pourquoi çà ne compte que mon premier bouton au lieu de cibler tout les bouton?

Salut CharlieVan,

S'il y a que le premier bouton qui fonctionne, le souci doit venir du nom de l'ID 'lire1' qui est certainement déclaré plusieurs fois. Pour rappel un nom d'ID doit être unique.
J'ai repris et modifié un peu ton code pour l'exemple.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<body>
    <h2 class="sous-titre">What is Frontend Mentor, and how will it help me?</h2>
    <button type="button" onclick="toggle_div(this, 'lire1');" title="Afficher la suite">+</button>
    <p class="text">
    <div id="lire1" style="display:none">Ici le texte 1</div>
    </p>
 
    <h2 class="sous-titre">Is Frontend Mentor free ?</h2>
    <button type="button" onclick="toggle_div(this, 'lire2');" title="Afficher la suite">+</button>
    <p class="text">
    <div id="lire2" style="display:none">Ici le texte 2</div>
    </p>
 
    <h2 class="sous-titre">Can I use Frontend Mentor projects in my portfolio?</h2>
    <button type="button" onclick="toggle_div(this, 'lire3');" title="Afficher la suite">+</button>
    <p class="text">
    <div id="lire3" style="display:none">Ici le texte 3</div>
    </p>
</body>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
        function toggle_div(btn, id_div) {
            btn.innerHTML = (btn.innerHTML == '+') ? '-' : '+';
            btn.title = (btn.title == 'Afficher la suite') ? 'Masquer la suite' : 'Afficher la suite';
            document.getElementById(id_div).style.display = (document.getElementById(id_div).style.display == 'none') ? 'block' : 'none';
 
            // Ou comme cela
            // if (btn.innerText == '+') {
            //     btn.innerText = '-'
            //     btn.title = 'Masquer la suite'
            //     document.getElementById(id_div).style.display = 'block'
            // } else {
            //     btn.innerText = '+'
            //     btn.title = 'Afficher la suite'
            //     document.getElementById(id_div).style.display = 'none'
            // }
        }