how do i attach array value to current position

Question

 <img src="img.jpg" id="try" width="200px" height="100px" alt="Loading">
 <input type="radio" name="round" value=0 >
 <input type="radio" name="round" value=1>
 <input type="radio" name="round" value=2>

var a = document.getElementById('try') ;

var b = document.getElementsByName('round') ; 

 var c = ['trophy','check','Hello'] ; 

  for(var i = 0 ; i < b.length ; i++){
   b[i].addEventListener('click', function () {
      a.src = c[i]+'.jpg' ;
        } ,false); 
   }

i want to click on radio button than change image . image name store in array this will attach by addEventlistener function through but it won't work .

Possible duplicate of [How do JavaScript closures work?](http://stackoverflow.com/questions/111102/how-do-javascript-closures-work) — Jaromanda X, Feb 21 '16 at 13:25
you need to investigate `closures` in javascript ... the value of `i` will be b.length by the time the event triggers — Jaromanda X, Feb 21 '16 at 13:26
I can help you out, Are you sure that `b` and `c` will be of equal length? — Rajshekar Reddy, Feb 21 '16 at 13:28
Also can i use the value of the input element as the index of the img array? ie:`variable c` — Rajshekar Reddy, Feb 21 '16 at 13:34

score 0 · Accepted Answer · answered Feb 21 '16 at 13:40

With the same Html you can make modifications to your script as below

 var c = ['trophy','check','Hello'] ; 

 $('input[name="round"]').on('click',function(){ // bind event to all radio buttons at once
   $('#try').attr('src',c[$(this).attr('value')]+'.jpg'); //on click take the value of the radio button and then use it to get value from array and set as source to img
   //alert($('#try').attr('src'));
 });

Here is a Working JsFiddle

score 0 · Answer 2 · answered Feb 21 '16 at 13:58

with loop, when your click callback fires,variable hoisting ,it will return always the last element in c.Using closure will be help..

for(var i = 0 ; i < b.length ; i++){
    (function(){
    var img = c[i];
    b[i].addEventListener('click', function () {
                                   a.src = img +'.jpg' ;
                         } ,false); 
    }())
}

how do i attach array value to current position

2 Answers2