JSFiddle - React, Tailwind, and code Playground

HTML

<header>
        <h1>I'd like to buy a vowel</h1>
    </header>

    <main>
        <label>
            Type a phrase here:
            <input type='text' id='textBox'> </input>
        </label>
        <button id='countBtn' type='button'> <!--changed countButton to countBtn-->
            Count Vowels (a,e,i,o,u)
        </button>

        <div id='outputDiv'>
        </div>
    </main>

    <footer>
        <hr> 
        <p>&copy; UO CIS 111 2015 April&trade; LLC</p>
    </footer>

JavaScript

function countVowels() {
    var textBox, phrase, i, pLength, letter, vowelCount; //removed alert count vowels
    textBox = document.getElementById('textBox'); //corrected spelling of   Element
    phrase = textBox.value;
    phrase = phrase.toLowerCase;  //switched to lower case
    for(i = 0; i < phrase.length; i+= 1)  {
        letter = phrase[i];
        if (letter == 'a' ||  letter == 'e' || letter == 'i' || letter == 'o' ||  letter == 'u') { //fixed the spelling of letter. added another = in letter = 'e'
            vowelCount = vowelCount + 1;   
        }
    }
    alert(vowelCount + ' vowels');
    var outArea = document.getElementById('outputDiv'); //corrected to     outputDiv instead of outputId and put document. in front of the getElement
    outArea.innerHTML = vowelCount + ' vowels in ' + phrase;
}

function init(){
    alert('init vowels');
    var countTag = document.getElementById('countBtn'); //switched to semi-   colon and condensed to single line
    countTag.onclick = countVowels;
}

window.onload = init;