Vanilla JS Fizzbuzz does not work

Question

I am trying to add a new LI looping from 1 to 100 and then display either the count var or fizz/buzz/fizzbuzz. Got it to work in Jquery, but not in pure JS.

The code:

<h1>Fbuzz</h1>
<div class="looping">
<ul id="list"></ul>
</div>


function myBuzz(){
  var ul =document.getElementById("list");
var newLi = document.createElement("li");

for ( var count = 1; count <= 100; count++) {
        if (count % 3 === 0 && count % 5 === 0) {
            newLi.appendChild(document.createTextNode("fiyyBuzz"));
        ul.appendChild(li);}
        else if (count % 3 === 0) {
            newLi.appendChild(document.createTextNode("fizz"));
        ul.appendChild(li);
        }
        else if (count % 5 === 0) {
        newLi.appendChild(document.createTextNode("Buzz"));
        ul.appendChild(li);}
        else {
            newLi.appendChild(document.createTextNode(count));
        ul.appendChild(li);
        }
    }
  }
myBuzz();

http://codepen.io/damianocel/pen/LpeEmM

Answer 1

you have to make a new li element for every for loop and then save that to a varible.... so

var newLi, li;

for ( var count = 1; count <= 100; count++) {
     newLi = document.createElement("li");
     newLi.className = "newClassName";

     if (count % 3 === 0 && count % 5 === 0) {
        li = newLi.appendChild(document.createTextNode("fizzBuzz"));
     } else if (count % 3 === 0) {
        li = newLi.appendChild(document.createTextNode("fizz"));
     } else if (count % 5 === 0) {
        li = newLi.appendChild(document.createTextNode("Buzz"));
     } else {
        li = newLi.appendChild(document.createTextNode(count));
     }

     ul.appendChild(li);
}

in css

.newClassName { 
   display: block;
}