Discussion :

[CharlieVan]

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

Je mes aussi en une photo du résultat qui est celui demandé.

[mathieu]

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

[labarre2002]

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 js :

Sélectionner tout - Visualiser dans une fenêtre à part

const btn=document.querySelector('button');

[CharlieVan]

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

[Doksuri]

btn sera le nom de la variable "locale" a la fonction

par exemple

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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 javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
function afficheText(toto) {
alert(toto);
}
afficheText('coucou');

aura le meme resultat

[CharlieVan]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[CharlieVan]

...

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

[Doksuri]

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 javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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 "+"
}

[labarre2002]

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

voila du savoir :

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

[CharlieVan]

...

Merci pour ton explication détaillée et pédagogue j'ai compris cette partie la

[CharlieVan]

...

Je vais essayer, la j'essaie de fermer un bouton quand un autre est ouvert et j'ai d'autre complication

[unanonyme]

btn.innerHTML = (btn.innerHTML == '+')? '-' : '+'; ==> toggle.

[domi65]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

alert(typeof bouton)

Ce n'est pas du tout un élément HTML.
Tu ne peux donc pas poser un écouteur dessus.

[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?

[ASCIIDEFOND]

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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'
            // }
        }