Discussion :

[CharlieVan]

Re bonjour,

Je viens de découvrir quelque chose, ma fonction cacher/afficher texte comporte l'erreur suivante :

script.js:3 Uncaught TypeError: Cannot read properties of undefined (reading 'innerHTML')
at toggle_div

Mais ma fonction de cacher ou afficher du texte fonctionne bien par contre sa ne lance pas ma seconde fonction qui consiste simplement en une boucle pour une écoute d'évènement

La fonction cacher/afficher texte ne comportait pas ce message d'erreur avant que je créer ma deuxième fonction.

En fait pour être plus clair, je tape un bloc de code, il fonctionne, j'en tape un deuxième et la le premier ne fonctionne plus ou m'affiche un message d'erreur?

Ca doit être courant ce genre d'erreur mais ce que je cherche a comprendre c'est la méthodologie de réflexion de la machine qui lis mon code.


Je vous mes le code complet js :

Code :

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
20
21
22
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';
}
 
 
 
function ecoute()
{
 
    let bouton = document.getElementsByClassName('.monBouton');
    for (let i in bouton){
        bouton.addEventListener("click", ()=>{
        console.log("btncliqué"+bouton[i]);
    });    
    }
}
 
toggle_div()
ecoute()

[Toufik83]

Bonjour,

La fonction function toggle_div( btn, id_div ) accepte deux paramètres, alors que vous l'avez utilisé (ligne 21) sans aucun paramètre, et donc JS se plante lorsqu'il arrive à la ligne btn.innerHTML ="......", car le paramètre btn est indéfini, la même chose pour le paramètre id_div.

[CharlieVan]

Effectivement je n'y avait pas penser. Maintenant j'ai cette erreur:

Uncaught ReferenceError: btn is not defined

Pourtant je définit bien btn avec btn.innerHTML.

Ma première fonction fonctionne toujours cela dit mais pas la deuxième

[Toufik83]

Montrez le nouveau code que vous utilisez pour voir ce qui se passe....

[NoSmoking]

Bonjour,

let bouton = document.getElementsByClassName('.monBouton');

Attention :
si on utilise querySelectorAll(), alors il faut mettre un point devant la classe ce qui représente le sélecteur CSS

Code :

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

const allBtns = document.querySelectorAll(".monBouton");        // il y a un point

si on utile getElementsByClassName(), alors il faut mettre simplement le nom de la classe

Code :

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

const allBtns = document.getElementsByClassName("monBouton");   // il n'y a pas de point

Ressources :

• Document.querySelectorAll()
• document.getElementsByClassName()

[CharlieVan]

Code :

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
20
21
22
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';
}
 
 
 
function ecoute()
{
 
    let bouton = document.getElementsByClassName('.monBouton');
    for (let i in bouton){
        bouton.addEventListener("click", ()=>{
        console.log("btncliqué"+bouton[i]);
    });    
    }
}
 
toggle_div(btn, id_div )
ecoute()

[ASCIIDEFOND]

let bouton = document.getElementsByClassName('.monBouton');

Comme déjà souligné plus haut par NoSmoking,

document.getElementsByClassName("monBouton"); // il n'y a pas de point

Sinon une autre approche pour le même résultat et sans appel de fonction.

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
    <div id="container">
        <h2 class="sous-titre">What is Frontend Mentor, and how will it help me?</h2>
        <button type="button" title="Afficher la suite">+</button>
        <p class="text">
        <div style="display:none;">Ici le texte 1</div>
        </p>
 
        <h2 class="sous-titre">Is Frontend Mentor free ?</h2>
        <button type="button" title="Afficher la suite">+</button>
        <p class="text">
        <div 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" title="Afficher la suite">+</button>
        <p class="text">
        <div style="display:none;">Ici le texte 3</div>
        </p>
    </div>

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
11
12
        let mesDivs = document.querySelectorAll('#container > div'), // Tableau des divs présentes dans la div ID ="container"
        mesBoutons = document.querySelectorAll('#container > button') // idem pour les boutons présents dans la div ID ="container"
 
        mesBoutons.forEach((boutonSelect, index) => { // On énumère les éléments présents dans le tableau mesBoutons. Et index renverra l'index du bouton sélectionné (ex. 0,1 ou 2)
            boutonSelect.addEventListener('click', () => {
                boutonSelect.innerText == '+' ? // Si c'est un + qui est affiché sur le bouton sélectionné
                //Alors le text du bouton sera un -, son attribut title changera ainsi que le style.display de la div suivante du bouton
                 [boutonSelect.innerText = '-', boutonSelect.title = 'Masquer la suite', mesDivs[index].style.display = 'block'] :
                 //Sinon
                 [boutonSelect.innerText = '+', boutonSelect.title = 'Afficher la suite', mesDivs[index].style.display = 'none']
            })
        })

[Toufik83]

Code :

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

1
2
toggle_div(btn, id_div )
ecoute()

Pourtant je définit bien btn avec btn.innerHTML.

Avant de passer aux fonctions, apprenez d'abord les bases de JS...

[unanonyme]

Bonjour,

Rappel, un élément P ne peut pas contenir un élément DIV.

Quand on tente de valider

Code html :

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

1
2
3
4
5
<!DOCTYPE html><html lang=fr><head><title>no</title></head><body>
 
<p><div>aa</div></p>
 
</body></html>

On obtient une erreur du genre

Error: No p element in scope but a p end tag seen.

Car les les éléments de type "en-ligne" ne peuvent pas accepter d'éléments de "bloque", sur firefox l'arbre est rendu tel que

Code html :

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

<p></p><div>aa</div><p></p>

Les imbrications invalide sont préventivement fermées de manière standard
afin d'homogénéiser l'affichage sur tous les navigateurs des syntaxes invalide.

Bref, c'était pour l’anecdote.

Je voulais surtout réagir dans la même démarche qu'ASCIDEFOND avec une version css.

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
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<div id="container">
	<div id="section1">
		<h2 class="sous-titre">What is Frontend Mentor, and how will it help me?</h2>
		<a href="#section1" title="Afficher la suite" class="plus">+</a>
		<a href="#" title="Afficher la suite" class="minus">-</a>
		<div class="text">
			<div>Ici le texte 1</div>
		</div>
	</div>
 
	<div id="section2">
		<h2 class="sous-titre">Is Frontend Mentor free ?</h2>
		<a href="#section2" title="Afficher la suite" class="plus">+</a>
		<a href="#" title="Afficher la suite" class="minus">-</a>
		<div class="text">
			<div>Ici le texte 2</div>
		</div>
	</div>
 
	<div id="section3">
		<h2 class="sous-titre">Can I use Frontend Mentor projects in my portfolio?</h2>
		<a href="#section3" title="Afficher la suite" class="plus">+</a>
		<a href="#" title="Afficher la suite" class="minus">-</a>
		<div class="text">
			<div>Ici le texte 3</div>
		</div>
	</div>
</div>
 
<style typ="text/css">
	div .text div {
		display: none;
	}
	div:target .text div {
		display: block;
	}
	div:target .plus {
		display: none;
	}
	div:target .minus {
		display: block;
	}
	.minus {
		display: none;
	}
</style>

Pour être tout à fait sincère, cette dernière ne permet pas d'afficher un élément par défaut au chargement de la page,
c'est donc d'un intérêt limité.

Mais bon, on a déjà vu les progrès (phénoménal) de cette techno, on est pas à l'abri d'un correctif,
un jour, peut être.

Bonne journée.