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 :

<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

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

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";
    }
})

DONC, je voudrais savoir

où serait le probleme lors du click qui peut se faire UNE SEULE FOIS un tour de boucle for.

Je veux dire, 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 plein de fois  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"

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

Bonjour,

il doit y avoir une erreur JS dans la console ? (F12 la console) j'ai testé ton code online

https://jsfiddle.net/cnxk4vzj/#collaborate 

avec cette erreur mais je ne sais pas quelle ligne:

Uncaught TypeError: Cannot read property 'parentElement' of undefined

    at HTMLButtonElement.<anonymous> ((index):147)

Bonjour Pierre750,

Remplace ton code ligne 16 par le mien (ci-dessous)

Observe la valeur de k-- stoquée dans kk et afficher dans la console

Tu comprendras je pense d'où vient le problème et il faudra adapter les autres codes

open[k].addEventListener('click', () => {
let kk = k--;
console.log(kk);
open[kk].parentElement.style.display = "block";
    })

-
Edité par AliasDmc 28 mars 2020 à 16:55:13

Bonjour, AliasDmc,

J'ai fait comme tu m'as dit de faire MAIS cela marche SEULEMENT pour le 1e essai de montrer un par un les elements lorsque l'on clique sur le "+" à coté du "Faire du javascript"

ET lors du 2e essai de montrer un par un les elements "Faire du javascript" avec le "+" à coté de "Faire du javascript",

ALORS, la console m'affiche l'error suivant : ShowOneByOneOpenClassroomAide01.js:24 Uncaught TypeError: Cannot read property 'parentElement' of undefined
    at HTMLButtonElement.<anonymous> (ShowOneByOneOpenClassroomAide01.js:24)

Donc ce bout de code ne marche qu'une seule fois et l'autre probleme est qu'il faut cliquer 2 fois sur le "+" à coté du "Faire du javascript".

Mais MERCI quand meme de ton aide, AliasDmc