Добавление изображения через чистый JS

Question

Я новичок в JS, помогите мне. У меня есть 4 изображения с тем же именем класса и скрытым div, который отображается при нажатии одного из 4 изображений. Как я могу добавить к моему div изображение, которое вы нажимаете? Я не хочу писать функцию для каждого изображения. Возможно ли это с моим кодом?

<a href="#"><img onClick="show()"class="img" src="css/images1/img1.png"></a> 
<a href="#"><img onClick="show()"class="img" src="css/images1/img2.png"></a> 
<a href="#"><img onClick="show()"class="img" src="css/images1/img3.png"></a> 
<a href="#"><img onClick="show()"class="img" src="css/images1/img4.png"></a> 
<div class="gallery"></div> 
<script> 
    function show(){ 
     var x=document.getElementsByClassName('gallery')[0]; 
     x.style.display="block";  
     x.innerHTML='<img src=css/images1/img1.jpg>'; 
    }; 
</script> 

Answer 1

Pass в "ЦСИ" элемента, который щелкнул:

function show(src){ 
    var x=document.getElementsByClassName('gallery')[0]; 
    x.style.display="block"; 
    x.innerHTML = '<img src="' + src + '">'; 
} 

Тогда для тегов HTML <img/> передать их ЦСИ к show:

<a href="#"><img onClick="show(this.src)"class="img" src="css/images1/img1.png"></a> 

Edit:, если вы должны выбрать «gallery» по классуName, используйте getElementsByClassName, как вы изначально имели.