See The Code
Gets the range of numbers within 50,000
function getRange(start, end){ if (end > 50_000) { alert("End Number Is To High, Cannot Exceed 50,000"); return; } let numArray = []; for (let index = start; index <= end; index++) { numArray.push(index); } return numArray; }
![](https://dsm56ob6rdulz.cloudfront.net/FizzBuzz/img/js.png)
Take user input and print numbers to the page
function printNumbers(){ let start = parseInt(document.getElementById("numOne").value); let end = parseInt(document.getElementById("numTwo").value); let numbers = getRange(start, end); displayData(numbers); }
Display the numbers on the page
function displayData(numbers){ const rowTemplate = document.getElementById("Data-Template"); const resultsBody = document.getElementById("resultsBody"); let colCount = rowTemplate.content.cloneNode(true).querySelectorAll("td").length; // ImportNode // Clear the table resultsBody.innerHTML = ""; // Loop over every element in the numbers array // Get the values and write them to the page for (let rowIndex = 0; rowIndex < numbers.length; rowIndex +=colCount) { let dataRow=rowTemplate.content.cloneNode(true); let cols=dataRow.querySelectorAll("td"); // Returns array of td elements findFizzBuzz(numbers, cols, rowIndex) // Add the row to the page resultsBody.appendChild(dataRow); } }
Filter for multiples of 3, 5, or both and add a CSS class to format text and font color
function findFizzBuzz(numbers, cols, rowIndex){ for (let colIndex = 0; colIndex < cols.length; colIndex++) { let value=numbers[rowIndex + colIndex]; if (typeof value==="undefined" ) { value="" ; } else { if (value % 3==0 && value % 5==0) { value=`FizzBuzz`; cols[colIndex].classList.add("fizzBuzz"); } else { if(value % 2==0){ cols[colIndex].classList.add("boldIt"); } if(value % 3==0){ value=`Fizz`; cols[colIndex].classList.add("fizz"); } if(value % 5==0){ value=`Buzz`; cols[colIndex].classList.add("buzz"); } } } // Note:use textContent to set content cols[colIndex].textContent = value; } } Full Source Code Below
// Take user input and print numbers to the page function printNumbers(){ let start = parseInt(document.getElementById("numOne").value); let end = parseInt(document.getElementById("numTwo").value); let numbers = getRange(start, end); displayData(numbers); } // Gets the range of numbers function getRange(start, end){ if (end > 50_000) { alert("End Number Is To High, Cannot Exceed 50,000"); return; } let newArray = []; for (let index = start; index <= end; index++) { newArray.push(getFizzBuzz(index)); } return newArray; } function getFizzBuzz(num) { let multiple1=document.getElementById("mulOne").value; let multiple2=document.getElementById("mulTwo").value; if (num % multiple1==0 && num % multiple2==0) { return `FizzBuzz`; } else { if (num % multiple1==0) { return `Fizz`; } if (num % multiple2==0) { return `Buzz`; } } return num; } // Display the numbers on the page function displayData(numbers){ const rowTemplate=document.getElementById("Data-Template"); const resultsBody=document.getElementById("resultsBody"); // Clones a template, then filters for allelements, then gets the length let colCount = rowTemplate.content.cloneNode(true).querySelectorAll("td").length; resultsBody.innerHTML = ""; // Loop over every element in the numbers array // Get the values and write them to the page for (let rowIndex = 0; rowIndex < numbers.length; rowIndex +=colCount) { let dataRow=rowTemplate.content.cloneNode(true); let cols=dataRow.querySelectorAll("td"); // Returns array of td elements for (let colIndex=0; colIndex < cols.length; colIndex++) { let value=numbers[rowIndex + colIndex]; formatFizzBuzz(value, cols, colIndex); // Add the row to the page resultsBody.appendChild(dataRow); } } } function formatFizzBuzz(value, cols, colIndex){ if (typeof value==="undefined" ) { value="" ; }else { if (value==`FizzBuzz`) { cols[colIndex].classList.add("fizzBuzz"); } if (value==`Fizz`) { cols[colIndex].classList.add("fizz"); } if (value==`Buzz`) { cols[colIndex].classList.add("buzz"); } } // Note: use textContent to set content cols[colIndex].textContent = value; } function changeValue() { let multiple1 = document.getElementById("mulOne").value; let multiple2 = document.getElementById("mulTwo").value; document.getElementById("mulFizz").textContent = `${multiple1} = `; document.getElementById("mulBuzz").textContent = `${multiple2} = `; document.getElementById("mulFizzBuzz").textContent = `${multiple1} & ${multiple2} = `; }