Printing For Loop Is One Number Off Each Time

Question

I'm playing around with some HTML and Javascript. I'm trying to print out 100 numbers on a screen after I press a button on a webpage. I can get the numbers to print on the screen but when I want to replace a number with a string like "Apple" if the number is divisible by 5. The code is below:

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
}

The output is always off by one element so it would print "5" and then the next line would be "Apple" instead of replacing "5" with "Apple" and then printing "6"

Here is the output:

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

Answer 1

You are printing i+1, instead of 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

The trouble is in the starting point of your for loop, where you initialize with -1 instead of 0. While you use (i + 1) at the end when you print a number, which is why it causes your results to be one number off. Use for(var i = 0; i <= 20; i++) instead of for (var i = -1; i < 20; i++) when you want to loop 20 times.

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

Using this code I was able to replace 5 with Apple.

 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

Use this snippet to follow what exactly happens within your loop. It should give you some clues.

 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)); } }