Radio Button changeImage (несколько ID?)

Question

У меня есть эта небольшая функция, в которой изображение меняется на выбор переключателя, и оно отлично работает.

Теперь проблема заключается в том, что функция должна быть доступна для второго «слайдера изображения». Проблема заключается в том, образ первого ползунка меняется, когда я использую радио-кнопку второго я пытался применить несколько идентификаторов, как это (конечно, потому что они такие же ID.):

function changeImage(imgName) { 
    image = document.getElementById('image1', 'image2'); 
    image.src = imgName; 
} 

. .. но это не сработало.

Fiddle here

Может кто-то помочь мне с этим?

Answer 1

Попробуйте это:

HTML:

<img src="http://placehold.it/100x100" name="image1" id="image1"> 
<br> 
<input type="radio" name="image1" onclick="changeImage('http://placehold.it/100x100',this);" checked> 
<input type="radio" name="image1" onclick="changeImage('http://placehold.it/200x200',this);"> 
<input type="radio" name="image1" onclick="changeImage('http://placehold.it/300x300',this);"> 
<br> 
<br> 
<br> 
<img src="http://placehold.it/100x100" name="image2" id="image2"> 
<br> 
<input type="radio" name="image2" onclick="changeImage('http://placehold.it/100x100',this);" checked> 
<input type="radio" name="image2" onclick="changeImage('http://placehold.it/200x200',this);"> 
<input type="radio" name="image2" obj.name onclick="changeImage('http://placehold.it/300x300',this);"> 

JS:

function changeImage(imgName, obj) { 
    image = document.getElementById(obj.name); 
    image.src = imgName; 
} 

Fiddle