FizzBuzz 在使用 getElementById.innerHTML 时返回随机数答案

【问题标题】：FizzBuzz giving back random numbers when using getElementById.innerHTMLFizzBuzz 在使用 getElementById.innerHTML 时返回随机数
【发布时间】：2018-09-21 05:48:04
【问题描述】：

希望有人可以在这里帮助我。我对编码和学习编写我的第一个 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>

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

【问题讨论】：

标签： function if-statement getelementbyid fizzbuzz

【解决方案1】：

您的代码没有返回随机数，而是不能被 3 或 5（或两者）整除的 i 值在 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 条件。

【讨论】：

我知道这很简单！谢谢蒂姆，我花了比我应该的时间更长的时间！

【解决方案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>

【讨论】：

@TimBiegeleisen 猜我错过了在我写这篇文章时发布的新答案。
在这里，点个赞。是的，通知有时（令人讨厌的）延迟。他们需要改进这一点。