title: Handling multiple <select> elements in HTML using Javascript
body: <p>I am using a mixture of JavaScript and HTML in Blogger's HTML interface to create a dropdown feature that cycles through pictures. Bear with me; although I know how to code generally, I have no knowledge of JavaScript or HTML. This is my reduced code:</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-html lang-html prettyprint-override"><code>&lt;script language="javascript"&gt;
    function setImage(select) {
      var image = document.getElementsByName("image-swap")[0];
      image.src = select.options[select.selectedIndex].value;
    }
  &lt;/script&gt;&lt;br /&gt;
  
  &lt;select id="all_population" name="all_population" onchange="setImage(this);"&gt;
    &lt;option value=""&gt;Select One&lt;/option&gt;
    &lt;option value="https://1.bp.blogspot.com/-aq1gUvq3RH4/X0buRMjyb4I/AAAAAAAAA1c/xaLW53hBW50oR5nncbAxMpAzhVbZGQO8wCLcBGAsYHQ/s1530/06_bar_chart_incomexAmerican%2BIndian.png;"&gt;American Indian&lt;/option&gt;
    &lt;option value="https://1.bp.blogspot.com/-EDsska671rY/X0budvqlQ-I/AAAAAAAAA1w/F-c6rmlpudk0SaOgMvi27biWIabYIW_5ACLcBGAsYHQ/s1530/06_bar_chart_incomexAsian.png;"&gt;Asian&lt;/option&gt;
  &lt;/select&gt;&lt;br /&gt;
  
  &lt;div class="separator" style="clear: both; text-align: center;"&gt;
    &lt;img data-original-height="1314" data-original-width="1530" height="344" name="image-swap" src="" width="400" /&gt;
  &lt;/div&gt;
  &lt;div class="separator" style="clear: both; text-align: center;"&gt;&lt;br /&gt;&lt;/div&gt;
  &lt;div class="separator" style="clear: both; text-align: left;"&gt;&lt;br /&gt;&lt;/div&gt;
  
  &lt;script language="javascript"&gt;
    function setImage2(select) {
      var image = document.getElementsByName("young_adult")[0];
      image.src = select.options[select.selectedIndex].value;
    }
  &lt;/script&gt;&lt;br /&gt;
  
  &lt;select id="income_race" name="young_adult" onchange="setImage2(this);"&gt;
    &lt;option value=""&gt;Select One&lt;/option&gt;
    &lt;option value="https://1.bp.blogspot.com/-tfwwZefpeiU/X0fSa5PcqwI/AAAAAAAAA2o/fE63pI0YCm4ooIu8PPN49_ilI6PbaV-IQCLcBGAsYHQ/s1530/06.2_bar_chart_incomexAmerican%2BIndian_young.png;"&gt;American Indian&lt;/option&gt;
    &lt;option value="https://1.bp.blogspot.com/-FE6xtPVG_V8/X0fSldTMyeI/AAAAAAAAA2s/3UlvT5CvmyEDiUThPfs8wfJOdTdQmfvzgCLcBGAsYHQ/s1530/06.2_bar_chart_incomexAsian_young.png;"&gt;Asian&lt;/option&gt;
  &lt;/select&gt;&lt;br /&gt;
  
  &lt;div class="separator" style="clear: both; text-align: center;"&gt;
    &lt;img data-original-height="1314" data-original-width="1530" height="344" name="young_adult" src="" width="400" /&gt;
  &lt;/div&gt;
  &lt;div class="separator" style="clear: both; text-align: center;"&gt;&lt;br /&gt;&lt;/div&gt;
  &lt;div class="separator" style="clear: both; text-align: left;"&gt;&lt;br /&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>From what I understand, I should create a second, different function <code>SetImage2()</code> for the second <code>&lt;select&gt;</code>. Otherwise, if my second <code>&lt;select&gt;</code>references <code>SetImage()</code>, the <code>&lt;select&gt;</code>will set the image below the first <code>&lt;select&gt;</code>(which was what was initially happening). However, when I do so, nothing is happening when I cycle through my second <code>&lt;select&gt;</code>. As far as I understand, I'm using the same logic as the first <code>&lt;select&gt;</code>, so I'm not sure why this second <code>&lt;select&gt;</code>isn't producing an image below it.</p>
  <p>I would love if someone could provide some insight. Cheers!</p>