Discussion :

[bricoreur]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[javatwister]

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;

[Loralina]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[bricoreur]

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

[javatwister]

Dans ton cas, ce code suffit

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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 javascript (alternative) :

Sélectionner tout - Visualiser dans une fenêtre à part

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;

[Loralina]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.