Два javascript 'changeimage' функции, только один работает

Question

Я изучаю javascript, и у меня есть проблема с функцией changeimage.

Мне нужно изменить как одно, так и второе изображение.

Это jsfiddle.

https://jsfiddle.net/7ewjoxnv/1/

А вот ниже, JavaScript:

var switchingImage; 

function changeImage() 
{ 
     switchingImage.src = this.value; 
} 

window.onload = function() { 
    var radios = document.getElementById('imageSwitcher').getElementsByTagName('input'); 
    switchingImage = document.getElementById('imageToSwitch'); 
    for(var i=0;i<radios.length;i++) 
    { 
     radios[i].onclick = changeImage; 
    } 

    var radios = document.getElementById('imageSwitcher2').getElementsByTagName('input'); 
    switchingImage = document.getElementById('imageToSwitch2'); 
    for(var o=0;o<radios.length;o++) 
    { 
     radios[o].onclick = changeImage; 
    } 
} 

Любая помощь будет оценена.

С наилучшими пожеланиями, David!

Answer 1

Когда вы делаете var radio = и switchingImage = во второй раз, вы меняете прежние значения.

В случае radios это просто происходит и не влияет на вас, потому что вы уже применили слушателей, которые вы хотели к старым переключателям.

В случае switchingImage тем не менее, это влияет на вас, потому что switchingImage в конечном итоге укажет на document.getElementById('imageToSwitch2'). Поэтому, когда вы звоните changeImage(), он всегда будет работать на document.getElementById('imageToSwitch2').

способ решить вашу проблему. Целенаправленно не лучшее решение. Используйте его как базовый уровень, чтобы улучшить его.

https://jsfiddle.net/7ewjoxnv/4/