Incrémenter le nom d'une fonction

Version imprimable

26/02/2014, 21h20
azorol

Incrémenter le nom d'une fonction
Bonsoir,

Je cherch dans la mesure du possible à faire changer le nom de ma fonction sur une boucle for, de maniere à na pas taper toutes les lignes dont j'ai besoin.

Mon code :
Code:

1 2 3 4 for (i = 0; i < 111; i++){ function clic+i(){ document.form1.data14.value=i; }
Je devrais retrouver :
function clic1()
function clic(2)
etc...

Mais ça ne marche pas.

Merci d'avance.
26/02/2014, 22h25
NoSmoking
Bonjour,
tu peux toujours faire comme suit
Code:

1 2 3 4 5 for( var i=0; i< 5; i++){ window['clic'+i] = function(){ // ici du code } }
pour obtenir des fonction clic1, clic2...etc...mais créer x fonctions qui font la même chose ou presque signifie que tu peux n'en faire qu'une, ton approche n'est donc pas la bonne.

Si tu nous disais où tu veux en arriver cela serait plus efficace même si on peux se faire une petite idée du soucis.

Ok merci pour ta réponse, en fait je doit générer 110 fois une fonction qui change de nom dixit le code suivant :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 function clic1(){ document.form1.devis_data14.value="1"; document.form1.verif_attrib_emp.value="1"; document.form1.insee_data8.value="1"; document.form1.insee_data11.value=document.form1.devis_data5.value; ifrm.document.form_reservation.verif_emplacement.value='1'; } function clic2(){ document.form1.devis_data14.value="2"; document.form1.verif_attrib_emp.value="2"; document.form1.insee_data8.value="2"; document.form1.insee_data11.value=document.form1.devis_data5.value; ifrm.document.form_reservation.verif_emplacement.value='2'; } ...etc function clic110(){ document.form1.devis_data14.value="110"; document.form1.verif_attrib_emp.value="110"; document.form1.insee_data8.value="110"; document.form1.insee_data11.value=document.form1.devis_data5.value; ifrm.document.form_reservation.verif_emplacement.value='110'; }
Comme ça le code fonctionne, mais j'ai tapé les 110 lignes et à chaque fois que je veut modifier ou ajouter quelques choses je doit modifier les 110 lignes manuellement.

Donc un code qui m'incrémente tous ça serait le bienvenu ;)

dans ce cas passe un paramètre à la fonction

Code:

1
2
3
4
5
6
7
function clic( param) {
  document.form1.devis_data14.value = param;
  document.form1.verif_attrib_emp.value = param;
  document.form1.insee_data8.value = param;
  document.form1.insee_data11.value = document.form1.devis_data5.value;
  ifrm.document.form_reservation.verif_emplacement.value = param;
}

27/02/2014, 08h26
SpaceFrog

Je ne vois en effet aucun intéret à declarer 110 fonctions.
Il suffit de passer un paramètre à la fonction
27/02/2014, 10h44
azorol

ok mais clic1, clic2,clic2 sont déclaré comme fonction sur 110 boutons (clic1(),clic2(), etc...)
Donc j'ai besoin que se soit le nom de la fonction qui change à chaque fois.
27/02/2014, 10h46
SpaceFrog

tu ne peux pas modifier le clicks ?

C'est justement ce que je cherche à faire, comme dans l'exemple ci-dessous constitué avec le code que vous m'avez donné.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 <!DOCTYPE html> <html> <head> <script> for( var i=0; i< 5; i++){ window['clic'+i] = function(){ // ici du code alert ('clic'+i); } } </script> </head> <body> <form action="" name ="form1"> <input type="button" value="1" onclick="clic1()"> <input type="button" value="2" onclick="clic2()"> <input type="button" value="3" onclick="clic3()"> <input type="button" value="4" onclick="clic4()"> <input type="button" value="5" onclick="clic5()"> </form> </body> </html>
Mais ça ne fonctionne pas parce quelque soit le bouton cliquer c'est le dernier chiffre de la boucle qui est pris en compte.

Non mais le modifier dans le html ...
a priori non .???

Il va te falloir redéfinir les fonctions mais au lieu de les dupliquer, passer par une seule fonction commune qui appellera les autres

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<input name="bt" type="button" onclick="clic1()" value="bouton" />
<input name="bt" type="button" onclick="clic2()" value="bouton" />
<input name="bt" type="button" onclick="clic3()" value="bouton" />
<script type="text/javascript">
function clic(v) {
    alert(v);
}
 
function fake(e) {
    e = e || window.event;
    e = e.target || e.srcElement;
    alert(e.idx);
};
 
allbt = document.getElementsByName('bt')
var j = -1;
 
while (allbt[++j]) {
    allbt[j].idx = j + 1;
}
 
 
for (i = 1; i < 4; i++) {
    window['clic' + i] = fake
 
}
</script>

Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <!DOCTYPE html> <html> <head> <script>function clic( param){ document.form1.devis_data14.value = param; document.form1.verif_attrib_emp.value = param; document.form1.insee_data8.value = param; document.form1.insee_data11.value = document.form1.devis_data5.value; ifrm.document.form_reservation.verif_emplacement.value = param; }</script> </head> <body> <form action="" name ="form1"> <input type="button" value="1" onclick="clic(1)"> <input type="button" value="2" onclick="clic(2)"> <input type="button" value="3" onclick="clic(3)"> <input type="button" value="4" onclick="clic(4)"> <input type="button" value="5" onclick="clic(5)"> </form> </body> </html>
ça marche aussi

avec 0 fonction ça marcha aussi
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 <!DOCTYPE html> <html> <head> <script>window.onload = function ( ) { for( var i=0; i< 5; i++){ document.getElementById(i).onclick = function(){ this.parent.devis_data14.value = i; this.parent.verif_attrib_emp.value = i; this.parent.insee_data8.value = i; this.parent.insee_data11.value = this.parent.devis_data5.value; ifrm.document.form_reservation.verif_emplacement.value = i; } } }</script> </head> <body> <form action="" name ="form1"> <input type="button" value="1" id="i1"> <input type="button" value="2" id="i2"> <input type="button" value="3" id="i3"> <input type="button" value="4" id="i4"> <input type="button" value="5" id="i5"> </form> </body> </html>
extraordinaire pas de variable pas de param pas de fonction

lorsqu'on écrit <input type="button" id="i5" value="5" onclick="clic5()"> cela revient à faire getElementById('i5').onclick=function() { return clic5(); } à quoi sert de définir une fonction dont le seul but est d'appeler une fonction. autant la définir directement.

je constate qu'encore une fois on utiliser des génération automatique de code (ici la fonction javascript généré par le html dans le input) pour ensuite bricoler.
les affectations de références est un moyen efficace de travailler.
ça évite de laisser trainer au niveau global des noms

ici clic5 est un nom assez explicite mais si un script fait au niveau global clic5 = 32; la methode click de l'input ne marchera plus car elle fait appel à clic5 qui n'est plus une fonction.

A+JYT

27/02/2014, 14h46
SpaceFrog

Citation:

à quoi sert de définir une fonction dont le seul but est d'appeler une fonction. autant la définir directement.

heu definir 110 fois la même fonction ?

Bonsoir,

Merci à vous tous, effectivement passer la variable à la fonction était la choses le plus simple à faire ! Je m'embarquais dans des boucles alors que c'était inutile !

Mon code javascript modifier :

Code:

1
2
3
4
5
6
7
function clic(num_valeur_emp){	
document.form1.devis_data14.value=num_valeur_emp;
document.form1.verif_attrib_emp.value=num_valeur_emp;
document.form1.insee_data8.value=num_valeur_emp;
document.form1.insee_data11.value=document.form1.devis_data5.value;
ifrm.document.form_reservation.verif_emplacement.value=num_valeur_emp;
}

Mon html modifié :

Code:

1
2
3
4
5
6
7
8
9
10
<input type="button"  name="bouton1" id="bouton1" onClick="clic(1);" value="1">
<input type="button"  name="bouton2" id="bouton2" onClick="clic(2);" value="2">
<input type="button"  name="bouton3" id="bouton3" onClick="clic(3);" value="3">
<input type="button"  name="bouton4" id="bouton4" onClick="clic(4);" value="4">
<input type="button"  name="bouton5" id="bouton5" onclick="clic(5);" value="5">
<input type="button"  name="bouton6" id="bouton6" onClick="clic(6);" value="6">
<input type="button"  name="bouton7" id="bouton7" onClick="clic(7);" value="7">
<input type="button"  name="bouton8" id="bouton8" onClick="clic(8);" value="8">
<input type="button"  name="bouton9" id="bouton9" onClick="clic(9);" value="9">
<input type="button"  name="bouton10" id="bouton10" onClick="clic(10);" value="10">

Par contre pour le html je doit les taper les 110 ;) a moins que je fasse une boucle en php (ça je sait faire lol) pour incrémenter mes boutons automatiquement au chargement du formulaire.

Encore merci.

27/02/2014, 16h29
SpaceFrog

si tu passe this.id en param de la fonction tu pourras ensuite recupérer le chiffre dans l'id

Citation:

si tu passe this.id en param ...tu pourras ensuite recupérer le chiffre dans l'id

dans ce cas autant passer this.value en direct ;).

Sur un cas comme celui là j'utiliserais la délégation pour ne pas surcharger le HTML
exemple

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html>
<head>
<title>Délégation</title>
</head>
<body>
<form action="" name ="form1">
  <input type="button" value="1">
  <input type="button" value="2">
  <input type="button" value="3">
  <input type="button" value="4">
  <input type="button" value="5">
</form>
<span id="valeur"></span>
<script>
document.documentElement.onclick = function(e){
  e = e || event;
  var obj = e.target || e.srcElement;
  if( obj.tagName == 'INPUT'){  // on peut ajouter des contrôle
    document.getElementById('valeur').innerHTML = obj.value;
  }
};
</script>
</body>
</html>

le seul javascript inclus étant

Code:

1
2
3
4
5
6
7
document.documentElement.onclick = function(e){
  e = e || event;
  var obj = e.target || e.srcElement;
  if( obj.tagName == 'INPUT'){                                // on peut ajouter des contrôles ici
    document.getElementById('valeur').innerHTML = obj.value;  // le code pour l'exemple
  }
};