Comment faire en sorte que les closures dans une boucle en JavaScript se souviennent de la valeur de la variable de leur itération ?

Bonjour à tous ! Je suis novice en JavaScript et j'ai rencontré un problème que je ne comprends pas du tout. J'écris un code simple : je veux ajouter des gestionnaires de clic sur plusieurs boutons, afin que chacun affiche son numéro. Voici mon code : ```javascript const buttons = document.querySelectorAll('button'); for (var i = 0; i < buttons.length; i++) { buttons[i].addEventListener('click', function() { console.log('Bouton numéro ' + i); }); } ``` Mais quand je clique sur n'importe quel bouton, la console affiche toujours "Bouton numéro 5" (la dernière valeur de i), quel que soit le bouton sur lequel j'ai cliqué. J'ai lu que cela est lié aux closures, mais je ne comprends pas comment le corriger. Pourquoi cela se produit-il ? Comment faire pour que chaque bouton se souvienne de son numéro ? Expliquez-moi, s'il vous plaît, en termes simples avec des exemples. Merci d'avance ! <<>>

Pourquoi le problème se produit-il ?

Le problème est lié à la façon dont fonctionnent les closures et la portée de la variable déclarée avec var. Le mot-clé var a une portée de fonction, pas de bloc. Ainsi, dans la boucle for, la même variable i est partagée entre toutes les itérations. Lorsque le gestionnaire de clic est exécuté (après la fin de la boucle), il fait référence à la variable i qui a déjà atteint sa valeur finale (buttons.length).