Discussion :

[Shadow750]

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.


Apres avoir cliqu� sur le "close" du bloc "Faire du Javascript"

Apres avoir cliqu� sur le "plus" du bloc "Faire du javascript"


Voici le code HTML :

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

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

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