Create onmouseover/onmouseout functions dynamically with javascript? -

so here example of function need replicate:

document.getelementbyid('img1').onmouseover = function() {     document.getelementbyid('img1').style.width = expandto + '%';      expandcompensate(1); }  document.getelementbyid('img1').onmouseout = function() {     expandreset(); } 

the situation have for loop creating div elements, , number of them dynamic. of right now, have creating 4 div elements, created 4 iterations of above functions img1, img2, img3 , img4. have onmouseover , onmouseout functions created dynamically based on how many div elements i've decided create (based on variable).

is there way this? here code context (it's not much), there comments in js explanations everything. part i'm trying automate @ bottom:

https://jsfiddle.net/4w0714su/3/

and here working example context of i'm trying achieve:

http://www.ericsartor.ca/imgwide

fyi: image picked random, needed high res images. doing practice! can me figure out!

i can't understand code well, i'll answer particularly you're asking.

you can achieve want doing loop:

for (var = 0; < 4; i++) {   document.getelementbyid('img' + i).onmouseover = function() {     this.style.width = expandto + '%';     expandcompensate(number(this.id.replace('img', '')));   };    document.getelementbyid('img' + i).onmouseout = function() {     expandreset();   } } 

note: can't use i variable inside event handlers' functions, because 4, since finish loop, , never changed again.

---

another way of doing using iife (immediately-invoked function expression), e.g:

for (var = 0; < 4; i++) {   (function(n) {     document.getelementbyid('img' + n).onmouseover = function() {       this.style.width = expandto + '%';       expandcompensate(n);     };      document.getelementbyid('img' + n).onmouseout = function() {       expandreset();     }   })(i); } 

doing that, you're passing function current i value, in scope, value of n different 1 each execution, e.g 0, 1, 2 , 3.

an immediately-invoked function expression (or iife, pronounced "iffy") javascript design pattern produces lexical scope using javascript's function scoping.