How do I change image B's src to Image A's src when Image A is clicked with Javascript?

Question

Goal: When image A is clicked that same image appears at the bottom of the page. Needs to work for more than one image.

When image A is clicked I need image B to now have the same src as image A. Or to Generate a copy of the clicked image. This should also be able to work for several pictures.

So for example if I clicked 5 images (Image A-01, A-02, A-03, A-04, A-05) on the screen....

At the bottom of the page there should be those 5 images

I've tried HTML:

<img id="myImage" src="http://placehold.it/150">
<img id="new" src="http://placehold.it/200">

JS

$(function(){
  $("#myImage").click(function() {
    $("#new").attr("src","http://placehold.it/150")
    });
});

Which works to replace one image but I need the same code to work for multiple image clicks.

Answer 1

Another proposal with an event listener.

 var imgCount = 5, i; for (i = 1; i <= 5; i++) { document.getElementById('img' + i).addEventListener('click', setImg('img' + i), false); } function setImg(id) { return function () { var img = document.createElement('img'); if (imgCount) { imgCount--; img.src = document.getElementById(id).src; document.getElementById('footer').appendChild(img); }; } }

 <img id="img1" src="http://lorempixel.com/200/100/city/1" /> <img id="img2" src="http://lorempixel.com/200/100/city/2" /> <img id="img3" src="http://lorempixel.com/200/100/city/3" /> <img id="img4" src="http://lorempixel.com/200/100/city/4" /> <img id="img5" src="http://lorempixel.com/200/100/city/5" /> <div id="footer"></div>

Answer 2

This will help you out

 function changeSrc(id){ document.getElementById('footer').src = document.getElementById(id).src; }

 <img src="http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/sample1_l.jpg" height="200" width="auto" id="img1" onclick="changeSrc(this.id)"/> <img src="https://images-eu.ssl-images-amazon.com/images/G/02/uk-electronics/product_content/Nikon/ECS-NK1308141-B00ECGX8FM-2L-1024w683q85s10-BKEH_London_Paris__0316.jpg" height="200" width="auto" id="img2" class="image" onclick="changeSrc(this.id)"/> <img src="" height="200" width="auto" id="footer" class="image" />

Answer 3

Try this:

<img src="https://randomuser.me/api/portraits/thumb/men/57.jpg" class="a">
<img src="https://randomuser.me/api/portraits/thumb/women/14.jpg" class="a">
<img src="https://randomuser.me/api/portraits/thumb/women/7.jpg" class="a">
<br>
<div id="sectionB">
  <img src="http://placehold.it/48" class="b">
  <img src="http://placehold.it/48" class="b">
  <img src="http://placehold.it/48" class="b">
</div>
<br>
<button id="reset">Reset</button>

===

$(function() {
  $('.a').click(function() {
    var img = $(this).attr('src');
    var index = $(this).index();

    $('.b').eq(index).attr('src', img);
  })

  $('#reset').click(function(){
    $('.b').attr('src', 'http://placehold.it/48');
  })
})

DEMO: https://jsfiddle.net/j359yfor/