boucle + function

Bonjour,

Si vous pouviez m'expliquer pourquoi je n'arrive pas à boucler sur mes règles ?
Vraisemblablement, je m'y prends mal mais pourquoi et comment faire pour y remédier ?
Voir les commentaires lignes 3 et 4

Code:

---

1 2 3 4 5 6 7

function controls (idField, action, rules) { for (rule of rules){ console.log(rule); // ok je retrouve bien mes 2 règles (isAlpha, isRequired) idField.addEventListener(action, function(){alert(rule)}); // alert() me renvoie 2 fois la dernière règle (isRequired) => j'espérai récupérer mes 2 règles } } controls(nom, 'focusout', ['isAlpha','isRequired']);

---

merci pour vos explications et conseils

Bonjour,

Tu ajoutes deux fois le même gestionnaire à idField, ce qui explique les 2 alert successives;
Au moment où tu déclenches l'événement en perdant le focus du champ, rule vaut isRequired;

Bonjour,
Pour préciser :
La valeur de rule affichée par une fonction est la valeur actuelle au moment de l'appel de la fonction et non la valeur au moment de la création de la fonction.
Illustration de ce principe :

Code:

---

1 2 3 4 5 6 7

i=0; function f0(){alert(i);} i=1; function f1(){alert(i);} i=2; f0(); //2 f1(); //2

---

Il est par conséquent nécessaire de créer autant de variables/constantes que nécessaire :
Solution 1 :

Code:

---

1 2 3 4 5

for (var rule of rules) { (function(rule) { idField.addEventListener(action, function(){alert(rule);}); })(rule); }

---

Solution 2 :
Utiliser let ou const :

Code:

---

1 2 3

for (const rule of rules) { idField.addEventListener(action, function(){alert(rule);}); }

---

Merci pour vos explications et conseils
Je vais essayer
Je vous tiens au courant
👍

Dans ton cas, ce code suffit

Code:

---

1 2 3

function controls (idField, action, rules) { idField.addEventListener(action, function(){alert(rules)}); }

---

En tout cas, tu ne doit pas ajouter un listener sur le même objet dans une boucle;
Dans la logique, c'est à l'intérieur de la fonction que tu peux boucler:

Code:

---

1 2 3

function controls (idField, action, rules) { idField.addEventListener(action, function(){for (var rule of rules){alert(rule)}}); }

---

Et dans ce cas, tu auras 2 alertes successives;

Citation:

---

Envoyé par javatwister

En tout cas, tu ne doit pas ajouter un listener sur le même objet dans une boucle;

---

A la limite, ce peut être maladroit conceptuellement selon les situations, mais techniquement on peut quand même indiquer que la chose est possible.

On peut ainsi détacher à tout moment l'une des fonctions liées à l'événement avec removeEventListener, exemple :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12

let ob_rules={ isAlpha:function(){alert("fonction isAlpha");}, isRequired:function(){alert("fonction isRequired");}};   function controls (idField, action, rules) { for (const rule of rules) { idField.addEventListener(action, ob_rules[rule]); } } controls(nom, 'focusout', ['isAlpha','isRequired']);   setTimeout(function(){nom.removeEventListener('focusout', ob_rules.isAlpha)},1000);

---

Bien sûr, on peut s'en sortir pareillement avec le tableau.

merci pour vos explications qui m'éclairent un peu plus.

Cela marche très bien.

bonne soirée à tous.