function getFizzbuzz(){
    let fizzValue = document.getElementById("fizzValue").value;
    let buzzValue = document.getElementById("buzzValue").value;
    let numbers = [];
    fizzValue = parseInt(fizzValue);
    buzzValue = parseInt(buzzValue);
    if (Number.isInteger(fizzValue) && Number.isInteger(buzzValue)){
        //calls generateNumbers function if true
        numbers = generateFizzBuzz(fizzValue, buzzValue);
        //Calls displayNumbers()
        displayFizzBuzz(numbers);    
    }
    else{
        alert("You must enter integers");
    }
}

function generateFizzBuzz(fizz, buzz){
    numbers = [];
    for(let index = 1; index<=100;index++){
        if(index % fizz == 0 && index % buzz == 0){
            numbers.push("FizzBuzz");
        }
        else if(index % fizz == 0){
            numbers.push("Fizz");
        }
        else if(index % buzz == 0){
            numbers.push("Buzz");
        }
        else{
            numbers.push(index);
        }
    }
    return numbers;
}

function displayFizzBuzz(fbArray){
    let tableBody = document.getElementById("results");
    let templateRow = document.getElementById("fbTemplate");
    tableBody.innerHTML = "";
    
    for (let index = 0; index < fbArray.length; index+=5) {
        let tableRow = document.importNode(templateRow.content, true);
        let rowCols = tableRow.querySelectorAll("td");
        rowCols[0].classList.add(fbArray[index])
        rowCols[0].textContent = fbArray[index];
        rowCols[1].classList.add(fbArray[index+1])
        rowCols[1].textContent = fbArray[index+1];
        rowCols[2].classList.add(fbArray[index+2])
        rowCols[2].textContent = fbArray[index+2];
        rowCols[3].classList.add(fbArray[index+3])
        rowCols[3].textContent = fbArray[index+3];
        rowCols[4].classList.add(fbArray[index+4])
        rowCols[4].textContent = fbArray[index+4];
        tableBody.appendChild(tableRow);
    }
}
                        
                    

Code Structure

getFizzbuzz()

This function gets the fizz and buzz values inputted by the user. After parsing and verifying that the inputs are integers, it calls the generateFizzBuzz() and displayFizzBuzz() functions. Else, it displays an alert telling the user to enter integers.

generateFizzBuzz()

This function creates an empty list numbers. A for loop loops through from 1 to 100 and checks the fizzbuzz values. If the number is divisible by boht the Fizz and Buzz, it will add FizzBuzz instead of the number. If it is divisible by the Fizz value, it pushes Fizz to the list instead of the number. If the number is divisible by the Buzz value, Buzz is pushed to the list rather than the number itself. Else, it adds the number to the list. After the for loop, it returns the list to getFizzbuzz().

displayFizzBuzz()

This function goes through the array and adds each value to a different column up to 5. It then adds that table row to the html and displays a table constisting of 5 columns.