title: how to link html form input to javascript function and showing the output
body: <p>I really lost and don't know what to do. 
  I tried to link the html form in put to a java-script function.</p>
  
  <p>but the problem is I do not know my steps are correct or not. the other thing is how I can show the output on the page.</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>function fnCountVowels(string) {
    var getinput = document.getElementsbyid("Vowel1");
    console.log(Vowel1.value);
  
    for (i = 0 &lt; getinput.length; i++) {
      chr = getinput.charat(i);
  
      if (Chr == "a" || (chr == "e") || (chr == "i") || (chr == "o") || (chr == "u")) {
        getinput = getinput + 1;
      }
    }
  
    return getinput;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="Vowel" class="Tab"&gt;
    &lt;form action=""  id="form" onsubmit="fnCountVowels(string)"&gt;
      Enter String: &lt;br&gt;
      &lt;input id="Vowel1" type="text" name="Enter the string "&gt;&lt;br&gt;&lt;br&gt;
      &lt;button type="submit" onclick"fnCountVowels(string)"&gt;Click&lt;/button&gt;
    &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>