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]

...

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

[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

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