// Get values from webpage
function getValues() {
    let fizzValue = document.getElementById("fizzValue").value;
    let buzzValue = document.getElementById("buzzValue").value;

    // this step ensures the values entered are converted to integers; decimals are truncated
    fizzValue = parseInt(fizzValue);
    buzzValue = parseInt(buzzValue);

    if(Number.isInteger(fizzValue) && Number.isInteger(buzzValue)){
        // call generateNumbers
        let fizzBuzzArray = fizzBuzz(fizzValue, buzzValue);
        // call displayNumbers
        displayValues(fizzBuzzArray);
    } else {
        alert("You must enter integers!");
    }
}

// Create FizzBuzz array
function fizzBuzz(fizzValue, buzzValue) {
    // create our empty array to hold our values
    let returnArray = [];

    // use a for loop with logic to solve our problem
    for (let i = 1; i <= 100; i++){

        if(i % fizzValue == 0 && i % buzzValue == 0){
            returnArray.push("FizzBuzz");
        } else if (i % fizzValue == 0) { // numbers divisible by 3
            returnArray.push("Fizz");
        } else if (i % buzzValue == 0) { // numbers divisible by 5
            returnArray.push("Buzz");
        } else { // numbers not divisible by 3 or 5 are simply passed as the number
            returnArray.push(i);
        }
    }
    // return our array to the getValues function
    return returnArray;
}

// Display FizzBuzz results to page
function displayValues(fizzBuzzArray) {

    // get the table body element from the page
    let tableBody = document.getElementById("results");

    // get the template from the app page
    let templateRow = document.getElementById("fizzbuzzTemplate");

    // clear the table first
    tableBody.innerHTML = "";

    for (let i = 0; i < fizzBuzzArray.length; i += 5) {

        let tableRow = document.importNode(templateRow.content, true);

        // grab just the td elements, and put them into an array
        let rowCols = tableRow.querySelectorAll("td");

        rowCols[0].classList.add(fizzBuzzArray[i])
        rowCols[0].textContent = fizzBuzzArray[i];

        rowCols[1].classList.add(fizzBuzzArray[i+1])
        rowCols[1].textContent = fizzBuzzArray[i+1];

        rowCols[2].classList.add(fizzBuzzArray[i+2])
        rowCols[2].textContent = fizzBuzzArray[i+2];

        rowCols[3].classList.add(fizzBuzzArray[i+3])
        rowCols[3].textContent = fizzBuzzArray[i+3];

        rowCols[4].classList.add(fizzBuzzArray[i+4])
        rowCols[4].textContent = fizzBuzzArray[i+4];

        tableBody.appendChild(tableRow);
    }
}

Here are some brief explanations of the functions used in this project.

getValues()

 This function starts by taking in the values entered by the user, and storing them in the appropriate variables. We then parse the variables, and test them to make sure they are integers. Once they pass this check they are passed into the fizzBuzz( ) function as parameters. An array is returned, and is held in the variable fizzBuzzArray. This variable is then passed into the displayValues( ) function as a parameter to finish the challenge.

fizzBuzz()

 This function takes in two variables: fizzValue and buzzValue. First, we create an empty array to store our values in. This array will be returned to the getValues( ) function later. We create a for loop to count from 1 to 100. Inside the for loop we apply our FizzBuzz logic. This logic is a series of if/else if/else statements following the rules of the FizzBuzz challenge.

 If the number is divisible by both the fizzValue and the buzzValue, then we assign the value of "FizzBuzz." If the number is divisible by just the fizzValue, then we assign the value of "Fizz." If the number is divisible by just the buzzValue, then we assign the value of "Buzz." If the number is not divisible by either, then we simply pass on the number to the array we intend to return.

displayValues()

 This function takes in the array variable with our numbers from 1 to 100 with the Fizz, Buzz, and FizzBuzz values inserted where appropriate. To display this array we are using an html template, which we put inside our html code with an id value of fizzbuzzTemplate. We create a tableBody variable, and set it equal to the element of "results," which contains our table. We then bring in the template, and assign it to the variable templateRow. Next, we set the inner html of our table to an empty string to avoid stacking results on top of each other in the event a user clicks the submit button multiple times. The for loop here is designed to run the length of the array, and to increment in steps of five since we want to display five values on each table row. We also further style the table elements by adding a class equal to their value. Inside our CSS file we added styles to classes named "Fizz," "Buzz," and "FizzBuzz." Values that are simply numbers have those classes added to them, but since there are no rules for them nothing is changed. At the end we add each newly constructed table row to our table body, and loop over the next five values from the fizzbuzzArray.