How do I generate multiple new HTML tags in Javascript

Question

I'm writing a small practice program involving the classic "FizzBuzz" coding problem. My goal is to have a user input two numbers and have the Fizz's, Buzz's, and FizzBuzz's print to the screen along with the numbers that don't get assigned those particular words.

I've written a function that can take in the user's number and run them through to output the numbers and words. It may not be pretty but it works. I've tested it in the console. What I'm trying to do now is print the output to the screen. I'm creating <li> tags via javascript and appending text to them. Then I'm appending that list item to the already existing <ul> in the html document.

This is my HTML

<div class="main-container" id="main-container">

        <h1 class="title" id="title">Fizz Buzz</h1>

        <!-- first form container -->
        <div class="first-multiple-container" id="first-multiple-container">

            <h3 class="first-multiple-title" id="first-multiple-title">Enter First Multiple</h3>
            <textarea  id="text-area-1" rows="2" cols="10"></textarea>
        </div>

        <!-- second form container -->
        <div class="second-multiple-container" id="second-multiple-container">

            <h3 class="second-multiple-title" id="second-multiple-title">Enter Second Multiple</h3>
            <textarea  id="text-area-2" rows="2" cols="10"></textarea>
        </div>

        <div id="button-container">
          <div id="button">Print Values</div>
        </div>

        <div>
          <ul id="output"></ul>
        </div>

    </div>

This is my Javascript code

const text1 = document.getElementById('text-area-1');
const text2 = document.getElementById('text-area-2');
const output = document.getElementById('output');
const list = document.createElement('li');


function findValue(event, num1, num2) {

  let i = 1;

  while (i <= 30) {
    if (i % num1 == 0 && i % num2 == 0) {

      list.appendChild(document.createTextNode('FizzBuzz '));
      output.appendChild(list);

    } else if (i % num1 == 0) {

      list.appendChild(document.createTextNode('Fizz '));
      output.appendChild(list);

    } else if (i % num2 == 0) {

      list.appendChild(document.createTextNode('Buzz '));
      output.appendChild(list);

    } else {
      list.appendChild(document.createTextNode(i + ' '));
      output.appendChild(list);
    }

    i++;
  }
}

document.getElementById('button').addEventListener('click', function (evt) {
    findValue(evt, text1.value, text2.value);
  });

This code is working in the sense that it is printing all the proper output to the screen, but its all inside one <li> tag. So its just one long horizontal line of numbers and words. I'm assuming this is happening because I'm only creating one <li> tag and everything is getting appended into that.

Is there a way to either create new <li> tags for every word or number? Or possibly break the line after every space? I'd like the output to be listed in a single vertical line rather than one long horizontal one.

Answer 1

Yes, the issue is that you are only creating a single <li> tag and then appending each word or number to it. I have modified your code to create a new <li> tag for each generated word or number:

 document.addEventListener("DOMContentLoaded", function() { const text1 = document.getElementById('text-area-1'); const text2 = document.getElementById('text-area-2'); let output = document.getElementById('output'); function findValue(event, num1, num2) { let i = 1, list; while (i <= 30) { if (i % num1 == 0 && i % num2 == 0) { list = document.createElement('li'); list.innerHTML = 'FizzBuzz '; output.appendChild(list); } else if (i % num1 == 0) { list = document.createElement('li'); list.innerHTML = 'Fizz '; output.appendChild(list); } else if (i % num2 == 0) { list = document.createElement('li'); list.innerHTML = 'Buzz '; output.appendChild(list); } else { list = document.createElement('li'); list.innerHTML = i + ' '; output.appendChild(list); } i++; } } document.getElementById('button').addEventListener('click', function(evt) { findValue(evt, text1.value, text2.value); }); }); 

 <body> <div class="main-container" id="main-container"> <h1 class="title" id="title">Fizz Buzz</h1> <!-- first form container --> <div class="first-multiple-container" id="first-multiple-container"> <h3 class="first-multiple-title" id="first-multiple-title">Enter First Multiple</h3> <textarea id="text-area-1" rows="2" cols="10"></textarea> </div> <!-- second form container --> <div class="second-multiple-container" id="second-multiple-container"> <h3 class="second-multiple-title" id="second-multiple-title">Enter Second Multiple</h3> <textarea id="text-area-2" rows="2" cols="10"></textarea> </div> <div id="button-container"> <button id="button">Print Values</button> </div> <div> <ul id="output"></ul> </div> </div> </body> 

For the above demo, I turned the #button from a <div> into a <button> to make it a little easier to tell you are supposed to click it.

The while loop could be futhor simplified like this:

 while (i <= 30) { list = document.createElement('li'); if (i % num1 == 0 && i % num2 == 0) { list.innerHTML = 'FizzBuzz '; } else if (i % num1 == 0) { list.innerHTML = 'Fizz '; } else if (i % num2 == 0) { list.innerHTML = 'Buzz '; } else { list.innerHTML = i + ' '; } output.appendChild(list); i++; }