const fizz = document.getElementById("fizzValue");
              const buzz = document.getElementById("buzzValue");
              const btn = document.getElementById("btnSubmit");
              const result = document.getElementById("results");

              btn.addEventListener("click", displayValues);

              function doFizzBuzz()
              {
                let fizzValue = parseInt(fizz.value);
                let buzzValue = parseInt(buzz.value);

                let fizzBuzzArray = [];

                for (let i = 1; i <= 100; i++)
                {
                  if (i % fizzValue==0 && i % buzzValue==0)
                  {
                    fizzBuzzArray.push("FizzBuzz");
                  } else if (i % fizzValue==0)
                  {
                    fizzBuzzArray.push("Fizz");
                  } else if (i % buzzValue==0)
                  {
                    fizzBuzzArray.push("Buzz");
                  } else
                  {
                    fizzBuzzArray.push(i);
                  }
                }
                return fizzBuzzArray;
              }

              function displayValues()
              {
                let array = doFizzBuzz();

                for (let i = 0; i < array.length; i+=10)
                {
                  let row = document.createElement("tr");

                  for (let j = 0; j < 10 && (i + j) < array.length; j++ )
                  {
                    let cell = document.createElement("td");
                    cell.textContent = array[i + j];

                    if (cell.textContent == "Fizz" || cell.textContent == "Buzz" || cell.textContent == "FizzBuzz")
                    {
                      cell.classList.add("fizzBuzz");
                    }

                    row.appendChild(cell);
                  }
                  result.appendChild(row);
                }

              }
            
          

Summary

This FizzBuzz project takes user inputs for “Fizz” and “Buzz” values, generates a sequence from 1 to 100, and replaces multiples of the input values with “Fizz”, “Buzz”, or “FizzBuzz”. The results are displayed in a table format on a webpage.

Code Structure

• HTML Elements:
  
  • fizz: Input field for the “Fizz” value.
  • buzz: Input field for the “Buzz” value.
  • btn: Button to trigger the FizzBuzz calculation.
  • result: Table element to display the results.
• Event Listener:
  
  • btn.addEventListener("click", displayValues);: Adds a click event listener to the button to trigger the displayValues function.
• Functions:
  
  • doFizzBuzz() function:
    
    • Reads the “Fizz” and “Buzz” values.
    • Iterates from 1 to 100.
    • Pushes “Fizz”, “Buzz”, “FizzBuzz”, or the number itself into an array based on divisibility.
    • Returns the array of results.
  • displayValues() function:
    
    • Calls doFizzBuzz() to get the results array.
    • Creates table rows and cells to display the results in a 10x10 grid.
    • Adds a CSS class to cells containing “Fizz”, “Buzz”, or “FizzBuzz” for styling.