Bonjour,

J'ai un script qui permet d'afficher des div jusque-là cachés en appuyant sur un bouton. Le but étant de faire des boutons de mise en page (un peu comme sur le forum d'openclassroom, bien que ce dernier utilise plutôt la fonction alert).

Voici le script en question :

function dropdown() {
	var dropdowns = document.getElementsByClassName("dropdown-content");
	var i;
	for (i = 0; i < dropdowns.length; i++) {
		var openDropdown = dropdowns[i];
		openDropdown.classList.toggle("show");
	}
}

Chaque bouton dont je souhaite dérouler un div se construit comme ceci :

<div class="dropdown"><input type="button" class="dropbtn" onclick="dropdown()" />
<div class="dropdown-content">
Contenu du div : mini formulaire, émoticones, etc.
</div></div>

Le problème, c'est que lorsque je clique sur un bouton, l'évènement s'applique pour tous les éléments "dropdown-content". Alors que je voudrais que ça s'applique seulement au div suivant celui qui subit l'évènement onclick. Savez-vous comment régler ça ?

-
Edité par Zoki_Marciano 20 avril 2018 à 19:09:38

Je ne sais pas si c'est ça que tu appelais observateur d'évènement, mais j'y suis parvenu en creusant cette piste !

Voilà mon code, très simple :

function dropdown(event) {
    var dropdown = document.getElementsByClassName("dropdown-content")[event];
    dropdown.classList.toggle("show");   
}

Et en ajoutant juste un nombre entre les parenthèses, qui s'incrémente à chacun de mes boutons :

<input type="button" class="dropbtn" id="pokedex" name="pokedex" onclick="dropdown(0)" />

Merci du coup !