javascript - Change element attributes and re-render -

i'm creating image elements directly div.

var mydiv = document.getelementbyid("mydiv"); function createimages(){   for(var = 0, piece = 1; < 10; i++){     for(var j = 0; j < 10; j++, piece++){         var lin = i*100, col = j*100;         var img = document.createelement("img");         img.src = '../'+piece+'.jpg';         img.style.position = "absolute";         img.style.top = ''+lin+'px';         img.style.left = ''+col+'px';                                img.style.border = '1px solid #000000';                              mydiv.appendchild(img);     }   } } 

this works fine! i'm trying give images onclick event calls function changes attributes, don't know if i'm adding onclick event right way.

img.onclick = change(); 

also don't know how re-render images automaticaly after changes take effect.

it needs in simple javascript.

any appreciated!

change

img.onclick = change(); 

to

img.onclick = change; 

in first case you're assigning value returned change() function onclick. in second case, you're assigning change function onclick.

also, there no need code actively re-rendering. browser takes care of you manipulate dom.