Почему этот код работает неправильно?

Question

в этом коде при нажатии на любую радиокнопку только изображение3.jpg показать, во втором клик нет изменений.

var a = document.getElementsByClassName('rbpic'); 

for (var i = 0 ; i<a.length ; i++) { 
    a[i].addEventListener("click" , changepic); 
} 

function changepic() { 
    var c = document.getElementById("image") ; 

    for (var j=0 ; j<a.length ; j++) { 
     var d = a[j].value ; 

     if(d === "one") { 
      c.src = "image1.jpg"; 
     } 
     else if (d === "two") { 
      c.src = "image2.jpg"; 
     } 
     else if (d === "three") { 
      c.src = "image3.jpg"; 
     } 
    } 
} 

Answer 1

Для ссылки на селективную кнопку, которая была нажата в обработчик событий, используйте this:

var a = document.getElementsByClassName('rbpic'); 

for (var i = 0 ; i<a.length ; i++) { 
    a[i].addEventListener("click" , changepic); 
} 

//We declare c on the outside so we're not calling document.getElementById() on every single click: 
var c = document.getElementById("image") ; 
function changepic() { 
    //Get the value of this radio button: 
    var d = this.value ; 
    //Execute the following as normal: 
    if(d === "one") { 
     c.src = "image1.jpg"; 
    } 
    else if (d === "two") { 
     c.src = "image2.jpg"; 
    } 
    else if (d === "three") { 
     c.src = "image3.jpg"; 
    } 
} 

Answer 2

Ваша проблема заключается в функции changepic(): Вы пробегаем по каждой кнопке радио и установив соответствующее изображение при изменении любого из переключателей.

Мои два решения:

1. избавиться от петли и заменить a[j].value с e.target.value:

   function changepic(e) { 
       var c = document.getElementById("image"); 
       var d = e.target.value; 
       if (d === "one") { 
        c.src = "image1.jpg"; 
       } else if (d === "two") { 
        c.src = "image2.jpg"; 
       } else if (d === "three") { 
        c.src = "image3.jpg"; 
       } 
   } 
   

2. Loop через все кнопки радио и посмотреть, какой из них проверяется:

   function changepic() { 
       var c = document.getElementById("image"); 
       for (var j = 0; j < a.length; j++) { 
        if (a[j].checked) { 
         var d = a[j].value; 
         if (d === "one") { 
          c.src = "image1.jpg"; 
         } else if (d === "two") { 
          c.src = "image2.jpg"; 
         } else if (d === "three") { 
          c.src = "image3.jpg"; 
         } 
        } 
       } 
   }