Code Breakdown

Function printNumbers takes a user input and prints to the page.

---

Function getRange and pushes it to our array.

---

Function displayData gets our data and runs it through out for loop to display our fizz and buzz selections.

---

For loop checks the values against our fizz and buzz numbers and adds fizz,buzz, or fizzbuzz when it matches.

// See The Code
// Fizzbuzz
// Take user input and print numbers to the page
function printNumbers() {
let startNum = parseInt(document.getElementById('numOne').value);
let endNum = parseInt(document.getElementById('numTwo').value);
let numFizz = parseInt(document.getElementById('numFizz').value);
let numBuzz = parseInt(document.getElementById('numBuzz').value);
let numFizzBuzz = numFizz * numBuzz;

let numbers = getRange(startNum, endNum);

displayData(numbers, numFizz, numBuzz, numFizzBuzz);
}

// Gets the range of numbers
function getRange(start, end) {
let numberArray = [];

for (let i = start; i <= end; i++) {
    numberArray.push(i);
}

return numberArray;
}

// Displays the numbers on the page
function displayData(numbers, fizz, buzz, fizzbuzz) {
const rowTemplate = document.getElementById('Data-Template');
const resultsBody = document.getElementById('resultsBody');
let colCount = rowTemplate.content.cloneNode('true').querySelectorAll('td')
.length;
// Clears the table
resultsBody.innerHTML = '';

// Loop over every element in the numbers array
for (let rowIndex = 0; rowIndex < numbers.length; rowIndex += colCount) {
// You need to clone it each time
let dataRow = rowTemplate.content.cloneNode('true');

// Return an array of columns
let cols = dataRow.querySelectorAll('td');

for (let colIndex = 0; colIndex < cols.length; colIndex++) {
let value = numbers[rowIndex + colIndex];

if (typeof value === 'undefined') {
    value = '';
} else if (value % fizzbuzz === 0) {
    value = 'FizzBuzz';
    cols[colIndex].classList.add('fizzbuzz');
} else if (value % fizz === 0) {
    value = 'Fizz';
    cols[colIndex].classList.add('fizz');
} else if (value % buzz === 0) {
    value = 'Buzz';
    cols[colIndex].classList.add('buzz');
}


cols[colIndex].textContent = value;
}

resultsBody.appendChild(dataRow);
}
}