title: How to display one or more images, depends of selected dropdown choice?
body: <p>I want to display one or more images, depending on the dropdown choice, with javascript. </p>
  
  <p>For first choice I want to display one image, but for second choice I want to display two images, first one plus new. I found many answers how to display different images based on dropdown choice but I couldn't find an answer how to display img + img if user choose that dropdown option. </p>
  
  <p>By the way, I don't have many experience with javascript but that is what I am looking for. It sounds simple but not for me... :-) Thanks!</p>
  
  <p>This is how I was thinking that js code should looks, but doesn't work. I am sure you can tell me why and what is right solution... Thanks to everyone! And before that I was define var...</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var ring1 = document.getElementById('ring1');
  var ring2 = document.getElementById('ring2');
  var ring3 = document.getElementById('ring3');
  var ring4 = document.getElementById('ring4');
  var ring5 = document.getElementById('ring5');
  var ring6 = document.getElementById('ring6');
  var ring1img = document.getElementById('ring1img');
  var ring2img = document.getElementById('ring2img');
  var ring3img = document.getElementById('ring3img');
  var ring4img = document.getElementById('ring4img');
  var ring5img = document.getElementById('ring5img');
  var ring6img = document.getElementById('ring6img');
  
  function selectedOption() {
    if (ring1.value == 1) {
      ring1img.style.display = 'block';
      ring2img.style.display = 'none';
      ring3img.style.display = 'none';
      ring4img.style.display = 'none';
      ring5img.style.display = 'none';
      ring6img.style.display = 'none';
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form id="regForm" action=""&gt;
  
    &lt;h1&gt;Ring Schedule Display System&lt;/h1&gt;
  
    &lt;div class="tab"&gt;Club info:
      &lt;p&gt;&lt;input id="club" placeholder="Name of club..." input type="text"&gt;&lt;/p&gt;
      &lt;p&gt;&lt;input placeholder="City..." input type="text"&gt;&lt;/p&gt;
      &lt;select number="rings" id="rings" onChange="selectedOption()"&gt;
        &lt;option hidden&gt;Choose number of rings...&lt;/option&gt;
        &lt;option value="1" id="ring1"&gt;1 ring&lt;/option&gt;
        &lt;option value="2" id="ring2"&gt;2 rings&lt;/option&gt;
        &lt;option value="3" id="ring3"&gt;3 rings&lt;/option&gt;
        &lt;option value="4" id="ring4"&gt;4 rings&lt;/option&gt;
        &lt;option value="5" id="ring5"&gt;5 rings&lt;/option&gt;
        &lt;option value="6" id="ring6"&gt;6 rings&lt;/option&gt;
      &lt;/select&gt;
    &lt;/div&gt;
  &lt;/form&gt;
  
  &lt;div class="tab"&gt;Welcome &lt;b&gt;&lt;span id="clubresult" style="font-size: 25px" &gt;&lt;/span&gt;&lt;/b&gt;&lt;br&gt;
    &lt;h2 align="center"&gt;Cat Show &lt;b&gt;&lt;span id="cityresult" style="font-size: 25px;"&gt;&lt;/span&gt;&lt;/b&gt;&lt;/h2&gt;
    &lt;img src="iconRing1.png" alt="ring1" style="width: 20%; display: " id="ring1img"&gt;
    &lt;img src="iconRing2.png" alt="ring2" style="width: 20%; display: " id="ring2img"&gt;
    &lt;img src="iconRing3.png" alt="ring3" style="width: 20%; display: " id="ring3img"&gt;
    &lt;img src="iconRing4.png" alt="ring4" style="width: 20%; display: " id="ring4img"&gt;
    &lt;img src="iconRing5.png" alt="ring5" style="width: 20%; display: " id="ring5img"&gt;
    &lt;img src="iconRing6.png" alt="ring6" style="width: 20%; display: " id="ring6img"&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>