title: My script is returning an undefined error in Microsoft Edge
body: <p>Here is the JS and HTML code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function dateChange(){
    var e = document.getElementById("trainingtype");
    var str = e.options[e.selectedIndex].value;
    var val = str;
    if (val == "1"){
      var x = document.getElementsByClassName("class1");
      for(i=0; i&lt;x.length; i++) {
        x[i].style.display = "block";
      }
      var x = document.getElementsByClassName("class2");
      for(i=0; i&lt;x.length; i++) {
        x[i].style.display = "none";
      }
      var x = document.getElementsByClassName("class3");
      for(i=0; i&lt;x.length; i++) {
        x[i].style.display = "none";
      }
      document.getElementById("datepicker").value="Select Date and Place";
    } else {
      //another If else statement
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;select name="item_name" id="trainingtype" onChange="dateChange()"&gt;
    &lt;option selected&gt;Select training type&lt;/option&gt;
    &lt;option value="Bike"&gt;Bike Riding&lt;/option&gt;
    &lt;option value="Bucket"&gt;Bucket Washing&lt;/option&gt;
    &lt;option value="Shoe"&gt;Shoe Tying&lt;/option&gt; 
  &lt;/select&gt;
  
  &lt;select name="datepicker" id="datepicker" onChange="amountChange(value)"&gt;
    &lt;option&gt;Select Date and Place&lt;/option&gt;
    &lt;option class="class1" value="1"&gt;1&lt;/option&gt;
    &lt;option class="class2" value="2"&gt;2&lt;/option&gt;
    &lt;option class="class3" value="3"&gt;3&lt;/option&gt;
  &lt;/select&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This code works perfectly in Chrome, Safari, and Firefox, but does not work in Microsoft Edge. In the console I get the error: <code>SCRIPT5009: 'value' is undefined</code></p>
  
  <p>How do I fix this?</p>