JSFiddle - React, Tailwind, and code Playground

HTML

<div style="text-align: center;">
     <h1> Vowel Counter </h1>
Please enter text for your vowel count:
    <br />
    <textarea id="text" rows="10" style="width: 100%;"></textarea>
    <br />
    <button onclick="countVowels()">Count Vowels</button>
    <p id="result"></p>
</div>

JavaScript

function countVowels() {

    var text = document.getElementById("text").value;
    var arrayOfLetters = text.split("");

    // These are the counters for the program to find the vowels.
    var countA = (text.match(/[Aa]/g) ? text.match(/[Aa]/g).length : 0);
    var countE = (text.match(/[Ee]/g) ? text.match(/[Ee]/g).length : 0);
    var countI = (text.match(/[Ii]/g) ? text.match(/[Ii]/g).length : 0);
    var countO = (text.match(/[Oo]/g) ? text.match(/[Oo]/g).length : 0);
    var countU = (text.match(/[Uu]/g) ? text.match(/[Uu]/g).length : 0);
    var countComma = (text.match(/[,.!": ;?)(]/gi) ? text.match(/[,.!": ;?)(]/gi).length : 0);

    var bold = "<strong>";
    var vowels = ["countA", "countE", "countI", "countO", "countU"];
// does nothing
//    for (var i = 0; i < vowels.length; i++) {
//       document.getElementById("result").innerHTML = i + vowels[i] + "<br />";
//    }
    
    var maxVal = Math.max(countA,countE,countI,countO,countU);
    
    // This code will output the results.
    document.getElementById("result").innerHTML = "";
    document.getElementById("result").innerHTML += "Total Letters: " + arrayOfLetters.length + "<br />";
    document.getElementById("result").innerHTML += "A's: " + formatValue(countA,maxVal) + "<br />";
    document.getElementById("result").innerHTML += "E's: " + formatValue(countE,maxVal) + "<br />";
    document.getElementById("result").innerHTML += "I's: " + formatValue(countI,maxVal) + "<br />";
    document.getElementById("result").innerHTML += "O's: " + formatValue(countO,maxVal) + "<br />";
    document.getElementById("result").innerHTML += "U's: " + formatValue(countU,maxVal) + "<br />";
    document.getElementById("result").innerHTML += "Punctuation: " + countComma + "<br />";
}

function formatValue(val, max) {
    return (val === max) ? '<strong>' + val + '</strong>' : val;
}