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

Question

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

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

Вот 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;
    }
}

Любая помощь будет высоко ценится.

С наилучшими пожеланиями, Дэвид!

Answer 1

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

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

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

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

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