香草 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;
}

香草 JS Fizzbuzz 不起作用

Vanilla JS Fizzbuzz does not work

javascript

loops

fizzbuzz