The Code for FIZZ BUZZ.


                        function getInput() {
                            let fizz = document.getElementById("fizz").value;
                            let buzz = document.getElementById("buzz").value;
                        
                            fizz = parseInt(fizz);
                            buzz = parseInt(buzz);
                        
                            if(!Number.isInteger(fizz) || !Number.isInteger(buzz)) {
                                alert("You must enter integers!");
                                return;
                            }
                        
                            //let results = generateResult(fizz, buzz, 100);
                            //let results = generateResultB(fizz, buzz, 100);
                            let results = generateResultC(fizz, buzz, 100);
                        
                            displayResults(results);
                        }
                        
                        function generateResult(fizz, buzz, max) {
                            let output = [];
                        
                            for(let i = 1; i <= max; i++) {
                                if(i % fizz == 0 && i % buzz == 0) {
                                    output.push("FizzBuzz");
                                } else if (i % fizz == 0) {
                                    output.push("Fizz");
                                } else if (i % buzz == 0) {
                                    output.push("Buzz");
                                } else {
                                    output.push(i);
                                }
                            }
                        
                            return output;
                        }
                        
                        function generateResultB(fizz, buzz, max)
                        {
                            let output = [];
                            let isFizz = false;
                            let isBuzz = false;
                        
                            for(let i = 1; i < max; i++) {
                                isFizz = i % fizz == 0;
                                isBuzz = i % buzz == 0;
                        
                                switch(true)
                                {
                                    case isFizz && isBuzz: {
                                        output.push("FizzBuzz");
                                        break;
                                    }
                                    case isFizz: {
                                        output.push("Fizz");
                                        break
                                    }
                                    case isBuzz: {
                                        output.push("Buzz")
                                        break;
                                    }
                                    default: {
                                        output.push(i);
                                        break;
                                    }
                                }
                            }
                        
                            return output;
                        }

                        function generateResultC(fizz, buzz, max)
                        {
                            let output = [];
                            // Empty strings evaluate to false.
                            for(let i = 1; i <= max; i++) {
                                output.push( ( (i % fizz == 0  ? 'Fizz' : '') 
                                    + ( i % buzz == 0 ? 'Buzz' : '' ) || i ) );
                            }

                            return output;
                        }
                        
                        function displayResults(results) {
                            let tableBody = document.getElementById("results");
                            let templateRow = document.getElementById("tableTemplate");
                        
                            tableBody.innerHTML = "";
                        
                            let numCols = document.importNode(templateRow.content, true)
                                .querySelectorAll("td").length;
                        
                            for(let i = 0; i < results.length; i += numCols) {
                                let tableRow = document.importNode(templateRow.content, true);
                        
                                let rowCols = tableRow.querySelectorAll("td");
                                for(let j = 0; j < rowCols.length; j++)
                                {
                                    if(!Number.isInteger(results[i + j])) {
                                        rowCols[j].classList.add(results[i + j])
                                    }
                                    rowCols[j].textContent = results[i + j]
                                }
                        
                                tableBody.appendChild(tableRow);
                            }
                        
                            // Alternate Solution:
                            /*     
                            let templateRows = "";
                            for(let i = 0; i < results.length; i++) {
                                let className = "";
                        
                                if(!Number.isInteger(results[i])) {
                                    className = ` class="${results[i]}"`;
                                }
                        
                                if(i == 0 || templateRows.endsWith(""))
                                {
                                    // strings with HTML don't render correctly, see GitHub for the code
                                    templateRows += ""
                                }
                                // strings with HTML don't render correctly, see GitHub for the code
                                templateRows += `${results[i]}`;
                        
                                if((i + 1) % 5 == 0)
                                {
                                    // strings with HTML don't render correctly, see GitHub for the code
                                    templateRows += ""
                                }
                            }
                            document.getElementById("results").innerHTML = templateRows; 
                            */
                        }
                        

FizzBuzz is a classic coding challenge. Here is my solution in JavaScript. We prompt for the fizz and buzz values. If a number is divisible by the fizz value we output 'Fizz', if it is divisible by the buzz value we output 'Buzz.' If the number is divisible by both we output 'FizzBuzz', otherwise we output the original number.

getInput()

In this function we use the JavaScript document API to read the input for the Fizz and Buzz values that the user input in the form. Then we call generateResult() to build an array with 'Fizz', 'Buzz', 'FizzBuzz' or the next number. Finally we call displayOutput() to show the results in a table.

generateResult()

In this function we build then return an array with the FizzBuzz results. The results are obtained using an if/else ladder and modulus division.

generateResultB()

In this function we build then return an array with the FizzBuzz results using an alternate solution. The results are obtained by checking if the current value is evenly divisble by the fizz or buzz values, then using a switch statement to add the result to the output array.

generateResultC()

In this function we build then return an array with the FizzBuzz results using an alternate solution. The results are obtained by using the ternary operator to check if the current number is divisible by the fizz value, this is concatenated with the results of checking if the current number is divisible with the buzz value. Either the word "Fizz", "Buzz" or an empty string results. This will result in 'Fizz', 'Buzz', 'FizzBuzz' or an empty string literal. The OR operator then compares the boolean result (an empty string literal is false) of the FizzBuzz concatenatation and the current value. If the left hand side is false, due to an empty string, then the right hand side will be true (since in JavaScript any integer with a positive falue is regarded as being true).

displayResults()

In this function we use the JavaScript document API to insert the a table with the results after building up the HTML needed to display them, with the help of a template tag. The commented out solution builds the HTML output without the use of a HTML template tag.