title: JS change radio buttons to drop down
body: <p>I have a JS file that changes fonts based on the font that is selected, up until now this was done with radio buttons. But since I have too many options now I would like to switch to a drop down menu. On the HTML side this is easy, but my JS is very rusty and this script was done creatively. </p>
  
  <p>The section that needs work is </p>
  
  <pre><code>var font = getRadioVal(document.getElementById('form'), 'NewFont');
  </code></pre>
  
  <p>Here getRadioVal is</p>
  
  <pre><code>function getRadioVal(form, name) {
      var val;
      // get list of radio buttons with specified name
      var radios = form.elements[name];
  
      // loop through list of radio buttons
      for (var i=0, len=radios.length; i&lt;len; i++) {
          if ( radios[i].checked ) { // radio checked?
              val = radios[i].value; // if so, hold its value in val
              break; // and break out of for loop
          }
      }
      return val; // return value of checked radio or undefined if none checked
  </code></pre>
  
  <p>So since this is the direct output, I would expect that this would work. But it does not. Could someone please point out where I am going wrong?</p>
  
  <pre><code>var font = document.getElementById('form').elements['NewFont'];
  </code></pre>
  
  <p>Edit:</p>
  
  <p>The form:</p>
  
  <pre><code>&lt;center&gt;
                              &lt;div id="ambidiv" class="container"&gt;
                              &lt;form name="ambiform" id="ambiform" action="javascript:void(-1)"&gt;
                              &lt;input type="text" name="theWord" id="theWord" size="35" class="input-hidden" value="Ambigram"&gt;&lt;br&gt;
  
                                    &lt;select id="font" name="NewFont"&gt;
                                      &lt;option value="ambimaticv2"&gt;AmbimaticHD&lt;/option&gt;
                                      &lt;option value="Ambinit"&gt;Ambinit&lt;/option&gt;
                                      &lt;option disabled&gt;_________&lt;/option&gt;
                                      &lt;option value="ambimatic"&gt;Ambimatic&lt;/option&gt;
  
                                    &lt;/select&gt;
  
                                  &lt;br&gt;
                              &lt;input type="button" value="Generate" onclick="makeAmbi()"&gt;
                              &lt;/form&gt;
  &lt;center&gt;
                              &lt;div id="theView" style="height: 120px; background-color: white;"&gt;  &lt;/div&gt;&lt;/center&gt;
                              &lt;/div&gt;
                              &lt;/center&gt;
                              &lt;/div&gt;
  </code></pre>
  
  <p>Then I want the value from that form to be put into</p>
  
  <pre><code>function drawWords (word1, word2) {
      var letters = [];
      for(i = 0; i &lt; word1.length; i++) {
  
          var img = document.createElement('img');
          if(isLetter(word1.charAt(i)) &amp;&amp; isLetter(word2.charAt(i))) {
              img.setAttribute('style', 'float: left;height:60px;width:50px;');
  
                  var font = document.getElementById('ambiform').value;
  
              if(font=='ambimatic'){
  
              var url = 'link' + word1.charAt(i).toLowerCase() + '' + word2.charAt(i).toLowerCase() + '.png';
              }
  </code></pre>