Variable dans fonctions à création dynamique.

**nicolay1** · 23/06/2013, 23h14

Bonjours,

Je voudrai savoir si vous connaissiez un moyen pour que la fonction placé dans le tabDiv[i].onmouseover :

Code :

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

tabDiv[i].onmouseover = function(){mouseOver(i);};

devienne

Code :

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

function(){mouseOver(1);};

(ou

Code :

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

function(){mouseOver(2);};

,

Code :

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

function(){mouseOver(2);};

etc.) et fonction de i

?

**SylvainPV** · 24/06/2013, 01h39

Je pense que ton problème vient du fait que la variable i est déréférencée au moment de l'évènement mouseover. Du coup l'englober dans une fonction anonyme devrait faire l'affaire :

Code :

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

1
2
 
tabDiv[i].onmouseover = (function(_i){ return function(){mouseOver(_i);}; })(i);

**nicolay1** · 24/06/2013, 08h06

Merci

effectivement ça marche

tu pourrais expliciter en détail le problème ou me renvoyer vers une page qui pourrait m'expliquer le problème ? Pour comprendre le fond du problème ^^' j'ai vachement du mal ac JS :'(

**SylvainPV** · 24/06/2013, 11h29

C'est sans doute la partie la plus complexe de Javascript, les scopes et closures.

Voilà quelques liens :
Usage avancé des fonctions JavaScript
http://www.coursweb.ch/javascript/closure.html
https://developer.mozilla.org/fr/doc..._en_JavaScript

Invité · 24/06/2013, 13h52

Bonjour,

Peut-être plus compréhensible:

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
28
29
30
31
32
33
<html>
  <head>
    <script type="text/javascript">
      function initialize(){
        var tabDiv = document.getElementsByTagName("div");
 
        // la closure
        function mouseOver(index){
            return function(e){
                console.log("i = " + index + ", id = " + this.id); // id du div
                console.log("event = " + e); // l'objet event
 
                // faire quelque chose ...
            }
        }
 
        for(var i = 0; i < tabDiv.length; i++){
          tabDiv[i].onmouseover = mouseOver(i);
        }
      }
 
 
    </script>
  </head>
  <body onload="initialize()">
    <div id="a">a</div>
    <div id="b">b</div>
    <div id="c">c</div>
    <div id="d">d</div>
    <div id="e">e</div>
  </body>
 
</html>

edit:
J'ai rajouté l'évènement retourné par onmouseover (paramètre e de la fonction plus qu'anonyme). Plus sympa pour faire des choses

A+

**Kaamo** · 24/06/2013, 14h07

Ou, ayant le même effet, utiliser .bind d'ECMAScript 5 :

Code :

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

tabDiv[i].onmouseover = function(_i){ return _i;}.bind(null, i);

Tu as donc le choix entre :
- la solution de Sylvain, on appelle ça une IIFE (Immediately Invoked Function Expression)
- celle de jlmag, on appelle ça une closure
- la mienne, utiliser le bind (Attention à la compatibilité des navigateurs)