Change image after click on image in javascript(Not using dropdown)
<p>Right now i am changing the image by dropdown selection. But i want to change image by click on choice of image Like.<br>
<a href="https://i.stack.imgur.com/9DMbz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9DMbz.png" alt="enter image description here"></a></p>

<p>If the user click on green t-shirt image then set green image in <code>&lt;div&gt;</code>, If user click on yellow t-shirt then set yellow t-shirt in <code>&lt;div&gt;.</code>
But right now i am using dropdown for this procedure.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var bgArray = [
  'https://d3s16h6oq3j5fb.cloudfront.net/1.13.0/img/new-city-home/bang-img/softtoys3.jpg',
  'https://d2z4fd79oscvvx.cloudfront.net/0020715_be_my_valentine_chocolate_box_205.jpeg'
]
$('#imageroom').on('change', function() {
  value = $(this).val() - 1;
  $('#backgroundIMage').css({
    'background-image': 'url(' + bgArray[value] + ')'
  });
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>#backgroundIMage {
  width: 400px;
  height: 300px;
  outline: 1px dotted gray;
  margin: 0 auto;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"&gt;&lt;/script&gt;
&lt;label&gt;Change image&lt;/label&gt;
&lt;select size="1" id="imageroom"&gt;
  &lt;option value="1"&gt;Image 1&lt;/option&gt;
  &lt;option value="2"&gt;IMage 2&lt;/option&gt;
&lt;/select&gt;


&lt;!-- for demo only --&gt;
&lt;hr&gt;
&lt;div id="backgroundIMage"&gt;&lt;/div&gt;</code></pre>
</div>
</div>
</p>