title: document.getElementById.show() is not a function
body: <p>I have a form. When a user clicks a list item and selects a "size value", it is given a class of selected, and then the user can submit the form.</p>
  
  <p>The part that I'm trying to figure out is that when no size is selected (and thus no list item has a class of "selected") the form won't be submitted, and instead the error message shows. I'm having trouble getting this to work and the error message to show, as the form still just submits.</p>
  
  <p>Currently I'm getting an error telling me that <code>document.getElementById("errormessage").show()</code> is not a function.</p>
  
  <p>Does anyone know why this is happening? And can anyone help me with my code to get it to work the way I want to?</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>.on('click', '.modalAddToBagButton', function(e) {
    e.preventDefault();
    var x = document.getElementsByClassName("es-value");
    var i = x.length;
    var selected = false;
    while (i--) {
      if (x[i].hasAttribute("selected")) {
        selected = true;
      }
    }
    if (selected == false) {
      //Displays error
      document.getElementById("errormessage").show();
    } else {
      $(this).closest("#dialog-addToBag").find('form').submit();
    }
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form&gt;
    &lt;ul&gt;
      &lt;li&gt;
        &lt;ul&gt;
          &lt;li class="size-value"&gt;&lt;/li&gt;
          &lt;li class="size-value"&gt;&lt;/li&gt;
          &lt;li class="size-value"&gt;&lt;/li&gt;
          &lt;li class="size-value"&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/form&gt;
  &lt;div id="errormessage"&gt;Please select a size&lt;/div&gt;
  &lt;div class="mt10"&gt;
    &lt;input type="submit" class="modalAddToBagButton"&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>