Incrémenter le nom d'une fonction

**azorol** · 26/02/2014, 22h20

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 :

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

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.

**NoSmoking** · 26/02/2014, 23h25

Bonjour,
tu peux toujours faire comme suit

Code :

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

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.

**azorol** · 26/02/2014, 23h49

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 :

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

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

**NoSmoking** · 27/02/2014, 00h01

dans ce cas passe un paramètre à la fonction

Code :

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

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;
}

**SpaceFrog** · 27/02/2014, 09h26

Je ne vois en effet aucun intéret à declarer 110 fonctions.
Il suffit de passer un paramètre à la fonction

**azorol** · 27/02/2014, 11h44

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.

**SpaceFrog** · 27/02/2014, 11h46

tu ne peux pas modifier le clicks ?

**azorol** · 27/02/2014, 12h24

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

Code html :

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

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.

**SpaceFrog** · 27/02/2014, 12h32

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 :

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

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>

**sekaijin** · 27/02/2014, 15h29

Code html :

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

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 html :

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

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

**SpaceFrog** · 27/02/2014, 15h46

à 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 ?

**azorol** · 27/02/2014, 17h16

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 :

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

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 html :

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

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.

**SpaceFrog** · 27/02/2014, 17h29

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

**NoSmoking** · 27/02/2014, 19h15

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 html :

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

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 :

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

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
  }
};

Incrémenter le nom d'une fonction

JavaScript

Discussions similaires

Partager

Partager