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