//Controller Function
                        function getValues()
                        {
                            //Declared the variable "fizzValue" using "let" and assigned it to the value that is found in the HTML element with the id "fizzValue" using document.getElementById.
                            let fizzValue = document.getElementById("fizzValue").value;
                        
                            //Declared the variable "buzzValue" using "let" and assigned it to the value that is found in the HTML element with the id "buzzValue" using document.getElementById.
                            let buzzValue = document.getElementById("buzzValue").value;
                        
                            //Using parseInt() to convert "fizzValue" and "buzzValue" to an integer.
                            fizzValue = parseInt(fizzValue);
                            buzzValue = parseInt(buzzValue);
                        
                            //Testing if "fizzValue" and "buzzValue" are integers using an if-statement.
                            if (Number.isInteger(fizzValue) && Number.isInteger(buzzValue)) {
                        
                        //Logic Function
                                //Calling fizzBuzz
                                let fbArray = fizzBuzz(fizzValue, buzzValue);
                                //Calling displayData and write the values to the screen
                                displayData(fbArray);
                                //Alerting the user if "fizzValue" and "buzzValue" are not Numbers.
                            } else {
                                alert("You must enter an integer")
                            }
                        }
                        
                        //Executing fizzBuzz
                        function fizzBuzz(fizzValue, buzzValue)
                        {
                            let returnArray = [];
                        
                            //For-Loop from 1 to 100
                            for (let i = 1; i <= 100; i++) {
                                //Checking to see if the number is divisible by 3, 5, or both
                                //Pushing fizz, buzz, or fizzBuzz into the array if divisible by 3, 5, or both
                                if (i % fizzValue == 0 && i % buzzValue == 0){
                                    returnArray.push('FizzBuzz');
                                } else if (i % fizzValue == 0) {
                                    returnArray.push('Fizz');
                                } else if (i % buzzValue == 0) {
                                    returnArray.push('Buzz');
                                } else {
                                    returnArray.push(i);
                                }
                            }
                            return returnArray;
                        
                        }
                        //View Function
                        
                        //Looping over the array and creating a tablerow for each item.
                        function displayData(fbArray){
                        
                            //Retrieve the table body element from the page
                            let tableBody = document.getElementById("results"); 
                        
                            //Getting the template row
                            let templateRow = document.getElementById("fbTemplate");
                        
                            //Clearing the table first
                            tableBody.innerHTML = "";
                            
                            for (let index = 0; index < fbArray.length; index += 5) {
                                
                                let tableRow = document.importNode(templateRow.content, true);
                        
                                //Using the columns in the template 
                                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);
                            }
                            
                            //Adding all the rows to the table
                        
                        }                        
                    
                    

Description

The code can be broken down into three main functions:

1.) The Controller Function

The first step is to create variables for both fizzValue and buzzValue, this gives the input a static identifier that can be utilized. Giving the user's input a static identifier assists us in adding JavaScript functionality. The second step serves to verify that the input is interpreted as integers and not as strings.

2.) The Logic Function

The integers are used as parameters in the fizzBuzz function. The variable fizzBuzzArray holds the returned array. After the input is evaluated by the fizzBuzz function, the for-loop tests three separate conditions using if-statements. When the number is divisible by both the fizzValue and the buzzValue, "FizzBuzz" is displayed. If the number is only divisible by the fizzValue, "Fizz" is displayed. If the number is only divisible by the buzzValue, then "Buzz" is displayed. The else-statement will simply display the number in the table if the number is not divisible by the fizzValue nor the buzzValue.

3.) The View Function

In this section of the code, I have implemented the functionality that allows us to render and display the data to the user. I have created a function named displayValues, which takes in the array variable with numbers from the range of 1 to 100. The user's input will accordingly determine which specific numbers will be substituted with FizzBuzz, Fizz, and Buzz values. The tableBody variable is set equal to the results element. I assigned the template to the variable templateRow. Afterwards, I have set the inner HTML of our table to an empty string. Setting the inner HTML to an empty string will prevent the tables from stacking if the view button is clicked more than once. The table is cleared each time the view button is clicked. The for-loop that has been implemented here improves the readability of the table by spreading the numbers across five separate rows. It is designed to run the length of the array and the loop increments in steps of five to display five values across each table row.