// get the values user entered
// controller
function getValues() {
    let fizzValue = document.getElementById("fizzValue").value;
    let buzzValue = document.getElementById("buzzValue").value;

    // convert to int
    fizzValue = parseInt(fizzValue);
    buzzValue = parseInt(buzzValue);

    // valudate is integers
    if (Number.isInteger(fizzValue) && Number.isInteger(buzzValue)) {
        // call genrateNumbers
        let fizzBuzz = generateFizzBuzz(fizzValue, buzzValue);

        // call displayNumbers
        displayFizzBuzz(fizzBuzz);
    }
    else {
        alert("You must enter integers");
    }
}

// calculate fizz, buzz and fizzbuzz
// logic
function generateFizzBuzz(fv, bv) {
    let fizzBuzz = [];

    // loop to find each fizz, buzz and fizzbuzz
    for (let i = 1; i <= 100; i++)
    {
        let item = "";

        if (i % (fv * bv) == 0) {
            item = "FizzBuzz";
        }
        else if (i % bv == 0) {
            item = "Buzz";
        }
        else if (i % fv == 0) {
            item = "Fizz";
        }
        else {
            item = i;
        }

        // add to array
        fizzBuzz.push(item);
    }

    return fizzBuzz;
}

// display fizzbuzz results
// view function
function displayFizzBuzz(fizzbuzz) {
    // get area to place text
    let tableBody = document.getElementById("results");

    // get the html template to use
    let templateRow = document.getElementById("fbTemplate");


    // clear table
    tableBody.innerHTML = "";

    // loop array to create output from array
    for (let i = 0; i < fizzbuzz.length; i += 5)
    {
        let tableRow = document.importNode(templateRow.content, true);

        // grab the td put in an array
        let rowCols = tableRow.querySelectorAll("td");
        rowCols[0].textContent = fizzbuzz[i];
        rowCols[1].textContent = fizzbuzz[i+1];
        rowCols[2].textContent = fizzbuzz[i+2];
        rowCols[3].textContent = fizzbuzz[i+3];
        rowCols[4].textContent = fizzbuzz[i+4];

        tableBody.appendChild(tableRow);
    }
}

The Code is structured in three functions.

getValues

getValues function gets the values the user enter for Fizz and Buzz.

This also function as the controller for the application.

generateFizzBuzz

generateFizzBuzz function takes in the two numbers as parameters and creates an empty array at the begining.

Next we enter a for loop from 1 to 100. We use the i variable to determine if the number is a Fizz (1 % Fizz == 0) or a Buzz (i % Buzz == 0) or a FizzBuzz (i % (Fizz * Buzz) == 0) and finally if i does not match any conditions the just pass the value of i inot the array.

This returns an array with all the numbers from 1 to 100 with Fizz, Buzz and FizBuzz replacing the values as calculated.

displayFizzBuzz

displayFizzBuzz function will display the data in a 5 column table format.

First we get the area we are going to place the data by id ('results'). Next we get the html template object we are going to use by id ('fbTemplate').

Next we clear the display area of any previous results.

Then we create a for loop that lops over the length of the array passed in. We grab the table row template as an object. We then use css selector to get all the 'td' tags and put them in a variable.

We add each array item to a td tag by adding to a number to i as needed for each column (+1, +2, ...)

Once all the data has been add for that row, we append the table row data to the display area until the array is compelted.