Création dynamique d'eventListeners
Résolu
filtep
-
filtep -
filtep -
Bonjour,
je cherche à créer dynamiquement des eventListeners sur les éléments du DOM (ici des boutons) eux même créés dynamiquement.
Seul le dernier bouton 'garde' l'eventListener et je ne comprends pas pourquoi ? Certainement une histoire de variables mais... un peu d'aide ma serait grandement utile.
Merci d'avance
Philippe
je cherche à créer dynamiquement des eventListeners sur les éléments du DOM (ici des boutons) eux même créés dynamiquement.
<!DOCTYPE html>
<html>
<head>
</head>
<body onload="charge()";>
</body>
<script type="text/javascript">
function charge(){
for(x=0; x<5; x++){
var nouv_text="<button id='btn_" + x + "'>Bouton " + x + "</button><br>";
document.body.innerHTML=document.body.innerHTML + nouv_text
document.getElementById('btn_'+x).addEventListener('click', function(){alert(this.id);});
}
}
</script>
</html>
Seul le dernier bouton 'garde' l'eventListener et je ne comprends pas pourquoi ? Certainement une histoire de variables mais... un peu d'aide ma serait grandement utile.
Merci d'avance
Philippe
A voir également:
- Création dynamique d'eventListeners
- Tableau croisé dynamique - Guide
- Creation compte gmail - Guide
- Création site web - Guide
- Media creation tool - Télécharger - Systèmes d'exploitation
- Création compte google - Guide
3 réponses
Bonjour,
Le problème c'est que tu réécris le contenu ( les boutons ) à chaque itération.
Sauf que l'addevent n'existe plus au moment ou tu recréés les boutons.
Pour le faire proprement, voici :
Le problème c'est que tu réécris le contenu ( les boutons ) à chaque itération.
Sauf que l'addevent n'existe plus au moment ou tu recréés les boutons.
Pour le faire proprement, voici :
function charge(){
for(x=0; x<5; x++){
var btn = document.createElement("BUTTON");
btn.id = 'btn_'+x;
btn.innerHTML = 'btn_'+x;
document.body.appendChild(btn);
btn.addEventListener('click', function(){alert(this.id);});
var br = document.createElement("BR");
document.body.appendChild(br);
}
}