Show et Hide éléments un par un

Version imprimable

3 pièce(s) jointe(s)

Bonjour, Bonsoir, messieurs, mesdames,
mon titre s'intitule : Show ET Hide UN PAR UN avec Pur Javascript.

Ce qui veut dire "Montrer ET Cacher un element par un element" lors du click.
Pièce jointe 549618

Apres avoir cliqué sur le "close" du bloc "Faire du Javascript"
Pièce jointe 549652
Apres avoir cliqué sur le "plus" du bloc "Faire du javascript"
Pièce jointe 549655

Voici le code HTML :

Code:

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
47
48
49
50
51
52
53
<div class="container">
        <div class="jumbotron">
            <h1>Comprendre la boucle For en Javascript 03 : <br/>
                Source de l'aide à la réussite de : <a href="https://stackoverflow.com/questions/38373291/using-javascript-how-to-display-element-one-by-one-on-click">
                Ajouter ET supprimer Un par Un à chaque clic avec JS Pur MAIS UNE SEULE FOIS Click ajout </a>
            </h1>
        </div>
 
        <H2>To Do List 
            <button type="button" class="ajoutAll">+</button>
            <button type="button" class="closeAll">x</button>
        </H2>
        <hr>
        <div class="alert alert-secondary" role="alert">
            <strong>Faire du Javascript 01</strong>
            <button type="button" class="open">
                <span>+</span>
            </button>
            <button type="button" class="close">
                <span>&times;</span>
            </button>
        </div>
 
        <div class="alert alert-primary" role="alert">
            <strong>Faire du Javascript 02</strong>
            <button type="button" class="open">
                <span>+</span>
            </button>
            <button type="button" class="close">
                <span>&times;</span>
            </button>
        </div>
 
        <div class="alert alert-secondary" role="alert">
            <strong>Faire du Javascript 03</strong>
            <button type="button" class="open">
                <span>+</span>
            </button>
            <button type="button" class="close">
                <span>&times;</span>
            </button>
        </div>
 
        <div class="alert alert-primary" role="alert">
            <strong>Faire du Javascript 04</strong>
            <button type="button" class="open">
                <span>+</span>
            </button>
            <button type="button" class="close">
                <span>&times;</span>
            </button>
        </div>
    </div>

Voici le code CSS

Code:

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
.jumbotron {
    background-color: #bdc3c7;
    height: 150px;
    padding: 20px;
    vertical-align: top;
}
 
hr {
    background: silver;
    opacity: 0.5;
}
 
.close {
    background: none;
    border: none;
    margin-left: 20%;
}
.open {
    background: none;
    border: none;
    margin-left: 20%;
}
 
 
.alert-secondary {
    background-color: silver;
    width: 35%;
    border: none;
    margin-bottom: 15px;
    padding: 10px;
    text-decoration: none;
}
 
.alert-primary {
    background-color: dodgerblue;
    width: 35%;
    border: none;
    margin-bottom: 15px;
    padding: 10px;
    text-decoration: none;
}

Voici le code Javascript :

Code:

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
const buttons = document.querySelectorAll('.close');
const open = document.querySelectorAll('.open');
const ajoutUnParUn = document.querySelector('.ajoutAll');
const closeAll = document.querySelector('.closeAll');
 
// Pour supprimer UN PAR UN à chaque clic VIA le "close" du block "Faire du Javascript" :
for (let i = 0; i < buttons.length; i++) {
    console.log(buttons[i].parentElement);
    buttons[i].addEventListener('click', () => {
        buttons[i].parentElement.style.display = "none";
    })
}
 
// Pour ajouter UN PAR UN à chaque clic VIA le "plus" du block "Faire du Javascript" :
for (let k = open.length - 1; k >= 0; k--) {
    open[k].addEventListener('click', () => {
        open[k--].parentElement.style.display = "block";
    })
} 
 
// Pour ajouter UN PAR UN à chaque clic VIA le "plus" à coté du "To Do List" :
let m = 0;
ajoutUnParUn.addEventListener('click', () => {
    if (m < buttons.length) {
        buttons[m++].parentElement.style.display = "block";
    }
})
// Pour supprimer UN PAR UN à chaque clic VIA le "close" à coté du "To Do List" :
let k = 0;
closeAll.addEventListener('click', () => {
    if (k < buttons.length) {
        buttons[k++].parentElement.style.display = "none";
    }
})

Le probleme est qu'on ne peut ajouter ET supprimer QU'UNE SEULE FOIS les blocs "Faire du Javascript".

Donc, je voudrais savoir comment peut-on faire pour cliquer autant de fois pour ajouter ou supprimer les blocs "Faire du Javascript"

PS : vous pouvez tester mon code pour voir où serait le souci avec mon code Javascript, merci

26/03/2020, 11h48
Doksuri
passer la gestion de l'affichage par le css
Code:

1 2 3 4 5 #tonElement { /* tes elements de style */ display:block; } #tonElement.hide { display:none; }
puis en JS (quand tu clique pour afficher/masquer)

Code:

document.getElementById('#tonElement').classList.toggle('show');

Salut,

ou de manière plus rudimentaire:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="container">
        <div>
		<button>Faire du Javascript 01</button> <button class="tog"> - </button>
	</div> 
	<div>
		<button>Faire du Javascript 02</button> <button class="tog"> - </button>
	</div> 
	<div>
		<button>Faire du Javascript 03</button> <button class="tog"> - </button>
	</div> 
	<div>
		<button>Faire du Javascript 04</button> <button class="tog"> - </button>
	</div> 	
</div>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const b=document.querySelectorAll(".tog");
 
b.forEach(v=>{
	v.addEventListener("click",(e)=>{
		if(e.target.textContent==" - "){
			e.target.previousElementSibling.disabled=true;
			e.target.textContent=" + "
		}
		else{
			e.target.previousElementSibling.disabled=false;
			e.target.textContent=" - "
		}
	},false)
})

Le coup du "bouton" titre me paraît logique dans ta page; je ne vois pas pourquoi on garderait un "+" ou un "X" à côté d'un élément vide ou invisible :roll:

et histoire de simplifier la lecture:
Code:

1 2 3 4 5 6 7 8 document.querySelectorAll(".tog").forEach(v=>{ let pre=v.previousElementSibling; pre.title=pre.textContent; v.addEventListener("click",()=>{ v.textContent = v.textContent==" - " ? " + " : " - "; pre.disabled = pre.disabled==false ? true : false; }) })

1 pièce(s) jointe(s)

Show ET hide One y One comme Exemple StackOverflow

En fait, je voudrais faire la meme chose que cet exemple vue sur "stack overflow" :
https://stackoverflow.com/questions/...ear-one-by-one

soit le fichier html :

Code:

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 <!doctype html> <html> <head> <meta charset="utf-8"> <title>Show One By One_Source:stackOverflow 01</title> <style> .block { display: none; } </style> </head> <body> <h1>Show One By One_Source:stackOverflow 01</h1> <a href="https://stackoverflow.com/questions/37898290/using-javascript-how-to-make-elements-appear-one-by-one">Source methode 02 Show One by One</a> <div class="gallery"> <div class="block"> <div class="img">1</div> </div> <div class="block"> <div class="img">2</div> </div> <div class="block"> <div class="img">3</div> </div> <div class="block"> <div class="img">4</div> </div> </div> <button id="btn" onclick="show()">appear one by one</button> <button id="btn" onclick="hide()">hide one by one</button> <script src="OneByOne01.js"></script> </body> </html>

Soit le fichier JS :

Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 //using only js var count = 0; function show(){ var items = document.getElementsByClassName("block"); if(count < items.length) items[count++].style.display = "block"; } function hide(){ var items = document.getElementsByClassName("block"); if(items.length > 0) items[count--].style.display = "none"; }

le probleme de cet exemple de stack overflow,
lors du premier click sur bouton "show" ou bouton "hide,"
il affiche dans la console web :
TypeError: items[(tonumeric count)] is undefined
Pièce jointe 550258
Mais au deuxieme click sur le bouton "show" ou bouton "hide", les chiffres apparaissent ou disparaissent UN par UN à chaque clic

Donc, je voudrais savoir, par rapport à mon premier post, à l'aide de cette methode d'affichage et de cacher de "stack overflow",
où serait le probleme de mon premier post, lors du click qui peut se faire UNE SEULE FOIS un tour de boucle for.

Je veux dire, par rapport à mon premier post, lorsque je click plein de fois sur le "+" ou "x" a cote du todo list pour cacher TOUT ou montrer TOUT le "faire du javascript" et bien, cela marche !!
MAIS, lorsque j'essaie de nouveau, à cliquer sur le "+" ou le "x" pour cacher TOUT ou montrer TOUT le "faire du javascript" et bien, cela ne marche pas !!

ET meme probleme sur le "+" situé à coté du "Faire du Javascript"

Donc, je pense que mon probleme se situe au niveau du code javascript (voir mon premier post) mais moi-meme je ne trouve pas cette petite bebete dans mon code javascript, merci

28/03/2020, 13h15
Beginner.

Salut,

J'ai du mal à comprendre ce que tu cherches à faire...
Il faudrait que tu expliques ce que tu veux exactement, par exemple quel est le comportement attendu lorsque l'on clique sur + ou sur x des blocs "faire du javascript" et sur le + et sur le x de la "to do list"...

Ont-ils le même rôle ? Si oui pourquoi ne pas se contenter du + et du x de la "to do list" ?

---> En fait c'est un peu le bazar car lors des cliques dans quel ordre on doit cacher ou montrer les blocs ?

Avec le + et sur le x de la "to do list" il serait logique que l'on cache ou montre le dernier bloc... Et si on s'en tient là ça passe...
Mais comme tu peux aussi cacher ou montrer les blocs dans n'importe quel ordre avec les + ou les x des blocs "faire du javascript" alors l'ordre est perdu...

Si par exemple tu supprimes le deuxième bloc avec le x du bloc "faire du javascript 02" et qu'ensuite tu cliques sur le + de la to do list alors ce n'est pas le dernier bloc qu'il faut montrer mais le deuxième...

Citation:

Envoyé par Shadow750

Je veux dire, par rapport à mon premier post, lorsque je click plein de fois sur le "+" ou "x" a cote du todo list pour cacher TOUT ou montrer TOUT le "faire du javascript" et bien, cela marche !!

C'est censé cacher/montrer tout d'un coup ou un par un ?

- Je ne suis pas sur de comprendre ce que signifie "...pour cacher TOUT ou montrer TOUT le "faire du javascript"...

Citation:

Envoyé par Shadow750

le probleme de cet exemple de stack overflow,
lors du premier click sur bouton "show" ou bouton "hide,"
il affiche dans la console web :
TypeError: items[(tonumeric count)] is undefined

J'ai testé et je n'ai pas eu ce massage...
28/03/2020, 15h23
Beginner.

A titre indicatif, j'ai modifié ton code pour que cela fonctionne autant de fois que tu veux mais pour l'ordre dans lequel les blocs sont cachée/montrés à toi de voir si cela te convient...
On peut changer l'ordre mais je ne sais pas lequel tu veux donc...

Lien pour tester : https://jsbin.com/yazodepozu/edit?js,output

Remerciement à Toi Beginner

Citation:

Envoyé par Beginner.

A titre indicatif, j'ai modifié ton code pour que cela fonctionne autant de fois que tu veux mais pour l'ordre dans lequel les blocs sont cachée/montrés à toi de voir si cela te convient...
On peut changer l'ordre mais je ne sais pas lequel tu veux donc...

Lien pour tester : https://jsbin.com/yazodepozu/edit?js,output

Bonjour, Bonsoir, Monsieur ou Madame,
à toi Beginner, Merci pour la résolution de mon problème de Show ou Hide One By One onclick
C'est ce que, je voulais faire cliquer autant de fois pour cacher ou montrer chaque element.

C'est-a-dire, lorsque l'on clique une fois pour cacher ou montrer un element,
que ce soit les boutons à coté du To-Do list OU ceux à coté du "Faire du Javascript" ALORS l'element est caché ou montré.

ET DONC, mon but était de cliquer autant de fois pour cacher ou pour montrer les elements c'est-à-dire UN CLIC sur "croix" ou "addition", fait cacher ou montrer UN ELEMENT.
PS : Pour l'ordre ce n'est pas grave, j'avais fait moi-meme des tests et j'avais decouvert moi aussi que c'était OBLIGER qu'il ait un ordre "croissant" (de 1 à 4) OU "decroissant" (de 4 à 1) SURTOUT POUR l'apparition des elements lorsque l'on clique sur le "+"

Pour l'exemple de Stack Overflow, bien sur, le show / hide Un par Un cela fonctionne .
MAIS LORS DU 2e essai sur les boutons "appear one by one" ET "hide one by one", lorsque je clique la 1e fois sur l'un de ces boutons et bien, RIEN NE SE PASSE :'
ET lorsque je clique la 2e fois sur l'un de ces boutons et bien, CELA MARCHE .

DONC, c'est cela le souci : lors du 2e essai sur les boutons "appear one by one" ET "hide one by one", lorsque je clique la 1e fois sur l'un de ces boutonset bien, RIEN NE SE PASSE :'
ET lorsque je clique la 2e fois sur l'un de ces boutonset bien, CELA MARCHE .

ET DONC, affichage de l'error : TypeError: items[(tonumeric count)] is undefined sur console web (j'utilise Mozilla)

Je viens, au moment où je t'ecris Beginner, d'essayer avec chrome, l'exemple de Stack Overflow
et Chrome me donne plus de précisions à cet error :
OneByOne01.js:14 Uncaught TypeError: Cannot read property 'style' of undefined
at hide (OneByOne01.js:14)
at HTMLButtonElement.onclick (OneByOne01.html:33) OneByOne.js:14
ET
OneByOne01.js:8 Uncaught TypeError: Cannot read property 'style' of undefined
at show (OneByOne01.js:8)
at HTMLButtonElement.onclick (OneByOne01.html:32) OneByOne.js:8

SOIT Line 14 js : items[count--].style.display = "none";
SOIT Line 08.js : items[count++].style.display = "block";

Je remets le code Exemple Show One By One de Stack Overflow :
Code:

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 <!doctype html> <html> <head> <meta charset="utf-8"> <title>Show One By One_Source:stackOverflow 01</title> <style> .block { display: none; } </style> </head> <body> <h1>Show One By One_Source:stackOverflow 01</h1> <a href="https://stackoverflow.com/questions/37898290/using-javascript-how-to-make-elements-appear-one-by-one">Source methode 02 Show One by One</a> <div class="gallery"> <div class="block"> <div class="img">1</div> </div> <div class="block"> <div class="img">2</div> </div> <div class="block"> <div class="img">3</div> </div> <div class="block"> <div class="img">4</div> </div> </div> <button id="btn" onclick="show()">appear one by one</button> <button id="btn" onclick="hide()">hide one by one</button> <script src="OneByOne01.js"></script> </body> </html>
ET Code Javascript
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 //using only js var count = 0; function show(){ var items = document.getElementsByClassName("block"); if(count < items.length) items[count++].style.display = "block"; } function hide(){ var items = document.getElementsByClassName("block"); if(items.length > 0) items[count--].style.display = "none"; }