使用getElementById.innerHTML时，FizzBu​​zz返回随机数

Question

希望有人可以在这里帮助我。我对编码和学习如何编写第一个Fizzbuzz非常陌生。当我使用console.log执行代码时，我的代码起作用了，但是当我尝试使用getElementById.innerHTML时，它想要返回随机数。

这就是我正在使用的东西：

function clickAlert2() {
  for (var i = 1; i <= 140; i++) {
    if (i % 3 === 0 && i % 5 === 0) {
      document.getElementById("ngList").innerHTML +=
        i + ". National Gamers <br>";
    } else if (i % 3 === 0) {
      document.getElementById("ngList").innerHTML += i + ". National <br>";
    } else if (i % 5 === 0) {
      document.getElementById("ngList").innerHTML += i + ". Gamers <br>";
    } else {
      document.getElementById("ngList").innerHTML += i;
    }
  }
}

  .button2 {
  background-color: #FAD7A0;
  color: #21618C;
  text-align: center;
  text-decoration: none;
  font-size: 18px;

<input type="button" class="button2" value="Print 140 Lines" onclick="clickAlert2()">
<br>
<div id="ngList"></div>

我认为这只是小事，但我不知道这可能是什么...

Answer 1

您的代码没有给出随机数，而是i值不能被3或5（或两者都不整除）的HTML不会收到<br>换行符。如果在<br>情况下添加else，则输入内容将与您期望的一样。

function clickAlert2() {
    for (var i=1; i <= 140; i++) {
        if (i % 3 === 0 && i % 5 === 0) {
            document.getElementById("ngList").innerHTML +=
                i + ". National Gamers <br>";
        }
        else if (i % 3 === 0) {
            document.getElementById("ngList").innerHTML += i + ". National <br>";
        }
        else if (i % 5 === 0) {
            document.getElementById("ngList").innerHTML += i + ". Gamers <br>";
        }
        else {
            document.getElementById("ngList").innerHTML += i + "<br>";
        }
    }
}

.button2 {
    background-color: #FAD7A0;
    color: #21618C;
    text-align: center;
    text-decoration: none;
    font-size: 18px;

<input type="button" class="button2" value="Print 140 Lines" onclick="clickAlert2()">
<br>
<div id="ngList"></div>

请注意，是否还要打印不匹配的行。如果不这样做，则应该完全删除else条件。

Answer 2

您忘记在else上添加一个中断，因此它在同一行上打印数字。第一行是123，不是随机数，而是一行中的前三个数字。

function clickAlert2() {
  var element = document.getElementById("ngList");

  for (var i = 1; i <= 140; i++) {
    if (i % 3 === 0 && i % 5 === 0) {
      element.innerHTML += i + ". National Gamers";
    } else if (i % 3 === 0) {
      element.innerHTML += i + ". National";
    } else if (i % 5 === 0) {
      element.innerHTML += i + ". Gamers";
    } else {
      element.innerHTML += i;
    }
    element.innerHTML += "<br>";
  }
}

  .button2 {
  background-color: #FAD7A0;
  color: #21618C;
  text-align: center;
  text-decoration: none;
  font-size: 18px;

<input type="button" class="button2" value="Print 140 Lines" onclick="clickAlert2()">
<br>
<div id="ngList"></div>