每次循环打印一个数字

Question

我正在玩一些 HTML 和 Javascript。 按下网页上的按钮后，我试图在屏幕上打印 100 个数字。 我可以将数字打印在屏幕上，但是当我想用“Apple”之类的字符串替换数字时，如果该数字可以被 5 整除。代码如下：

function testFunction() {
  var wrapper = document.getElementById("Test");
  var myHTML = '';

  for (var i = -1; i < 20; i++) {
        if (i % 5 == 0 && i % 3 == 0) {
        myHTML += '<span class="test">Pineapple</span><br/>';
    } else if (i % 5 == 0) {
        myHTML += '<span class="test">Apple</span><br/>';
        } else if (i % 3 == 0) {
          myHTML += '<span class="test">Pine</span><br/>';
        } else {
        myHTML += '<span class="test">' + (i + 1) + '</span><br/>';
    }
  }
  wrapper.innerHTML = myHTML
}

output 总是关闭一个元素，因此它将打印“5”，然后下一行将是“Apple”，而不是用“Apple”替换“5”，然后打印“6”

这是 output：

0
Pineapple
2
3
Pine
5
Apple
Pine
8
9
Pine
Apple
12
Pine
14
15
Pineapple
17
18
Pine
20

Answer 1

您正在打印 i+1，而不是 i。

  var wrapper = document.getElementById("Test");
  var myHTML = '';

  for (var i = -1; i < 20; i++) {
        if (i % 5 == 0 && i % 3 == 0) {
        myHTML += '<span class="test">Pineapple</span><br/>';
    } else if (i % 5 == 0) {
        myHTML += '<span class="test">Apple</span><br/>';
        } else if (i % 3 == 0) {
          myHTML += '<span class="test">Pine</span><br/>';
        } else {
        myHTML += '<span class="test">' + (i ) + '</span><br/>';
    }
  }
  wrapper.innerHTML = myHTML
}

Answer 2

问题出在你的 for 循环的起点，你用 -1 而不是 0 进行初始化。当你在最后打印一个数字时使用 (i + 1) 时，这就是为什么它会导致你的结果是一个数字离开。 当您想要循环 20 次时，请使用for(var i = 0; i <= 20; i++)而不是for (var i = -1; i < 20; i++) 。

function testFunction() {
  var wrapper = document.getElementById("Test");
  var myHTML = '';

  for (var i = 0; i <= 20; i++) {
        if (i % 5 == 0 && i % 3 == 0) {
        myHTML += '<span class="test">Pineapple</span><br/>';
    } else if (i % 5 == 0) {
        myHTML += '<span class="test">Apple</span><br/>';
        } else if (i % 3 == 0) {
          myHTML += '<span class="test">Pine</span><br/>';
        } else {
        myHTML += '<span class="test">' + i + '</span><br/>';
    }
  }
  wrapper.innerHTML = myHTML
}

Answer 3

使用此代码，我能够用 Apple 替换 5。

 function testFunction() { var wrapper = document.getElementById("Test"); var myHTML = ''; for (var i = -1; i < 20; i++){ if (i % 5 == 0) { myHTML += '<span class="test">Apple</span><br>'; } else{ myHTML += '<span class="test">' + i + '</span><br>' } } wrapper.innerHTML = myHTML } testFunction();

 <div id="Test"></div>

Answer 4

使用此代码段来跟踪循环中究竟发生了什么。 它应该给你一些线索。

 const log = Logger(); testFunction(); function testFunction() { for (let i = -1; i < 20; i += 1) { if (i % 5 == 0 && i % 3 == 0) { log(`${i} % 5 === 0 && ${i} % 3 === 0 => Pineapple`); } else if (i % 5 == 0) { log(`${i} % 5 === 0 => Apple` ); } else if (i % 3 == 0) { log(`${i} % 3 === 0 => Pine`); } else { log(`i = ${i}, i + 1 = ${i + 1}`); } } } function Logger() { let logEl; if (typeof window === "object") { logEl = document.querySelector("#log") || (() => { document.body.appendChild(Object.assign( document.createElement('pre'), { id: "log" }) ); return document.querySelector("#log"); })(); return (...logLines) => logLines.forEach(s => logEl.textContent += `${s}\n`); } else { return (...logLines) => logLines.forEach(ll => console.log(`* `, ll)); } }