title: Changing image with dropdown menu
body: <p>I am trying to change an image depending on what option is selected in a drop down menu. I am very new to javascript, so I am sure that it is a small problem that I'm not noticing. My attempt at implementing it is below: </p>
  
  <p>JS:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;             
      function setPicture() {
          var img = document.getElementById("coffeedropdown");
          var value = coffeedropdown.options[coffeedropdown.selectedIndex].value;
          alert(selectedValue);
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>HTML: </p>
  
  <pre><code>&lt;select id="coffeedropdown" onchange="setPicture();"&gt;
      &lt;option value="../Images/pimms.jpg"&gt;Select a Drink&lt;/option&gt;
      &lt;option value="../Images/caffe.jpg"&gt;Caffe&lt;/option&gt;
      &lt;option value="../Images/caffelatte.jpg"&gt;Caffe Latte&lt;/option&gt;
      &lt;option value="../Images/cappuccino.jpg"&gt;Cappuccino&lt;/option&gt;
      &lt;option value="../Images/marocchino.jpg"&gt;Caffee Marrocchino&lt;/option&gt;
      &lt;option value="../Images/americano.jpg"&gt;Caffe Americano&lt;/option&gt;
      &lt;option value="../Images/shakerato.jpg"&gt;Caffe Shakerato&lt;/option&gt;
      &lt;option value="../Images/corretto.jpg"&gt;Caffe Corretto&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>If anyone could help me out with this, I would really appreciate it! Thanks.</p>