CODEWITHSUNDEEP
javascript
Lyle
Lyle

Reputation: 111

Printing For Loop Is One Number Off Each Time

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

Upvotes: 0

Views: 60

Answers (4)

KooiInc
KooiInc

Reputation: 122888

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

Upvotes: 0

Abaan Shanid
Abaan Shanid

Reputation: 472

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>

Upvotes: 0

Pranjal Koshti
Pranjal Koshti

Reputation: 185

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
}

Upvotes: 2

Lee Boon Kong
Lee Boon Kong

Reputation: 1057

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
}

Upvotes: 1

Related Questions