香草 JS Fizzbuzz 不起作用

Question

我正在尝试添加一个从 1 到 100 的新 LI 循环，然后显示计数变量或 fizz/buzz/fizzbuzz。 让它在 Jquery 中工作，但不能在纯 JS 中工作。

代码：

<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

你必须为每个 for 循环创建一个新的 li 元素，然后将其保存到一个变量中......所以

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);
}

在css中

.newClassName { 
   display: block;
}