Question

我正在尝试添加一个从1到100的新LI循环，然后显示count var或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元素，然后将其保存到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);
}

在css中

.newClassName { 
   display: block;
}

Vanilla JS Fizzbuzz不起作用

1 个答案: