For loop with if statement will not run more than once javascript

Question

I am trying to print the odd and even numbers from an array but for some reason my loop is being exited after only printing one number ("0 is even" is being printed). I don't understand why it doesn't iterate through 1, 2, 3, 4, 5 and 6 as well?

<!DOCTYPE html>
<html>
<body>

<p> Click the button to print odd and even numbers </p>

<button onclick="loopNum()">Click me</button>

<p id="loopNumbers"></p>

<script> 
function loopNum(){

var numbers = [1, 2, 3, 4, 5, 6]
var text;

for(var i = 0;i < numbers.length;i++){
        if (i % 2 ==0){
            text = (i += " is even");
            }
        else if (i % 2 !=0){
            text = (i += "is odd");
        }   
        document.getElementById("loopNumbers").innerHTML=text;
    }

}

</script>

</body>
</html>

I though nobody would still do that mistake... don't use i += in your loop. It's evil. — GOTO 0
– GOTO 0, Commented Jan 24, 2017 at 15:53

Nina Scholz · Accepted Answer · 2017-01-24 16:09:11Z

2

You are assigning a string to i

i += " is even"

and

i += "is odd"

That breaks the loop.

You could use this code for even parts

text += i + " is even" + '<br>';

Then you need an initialization of text with ''

text = '';

and you could omit the second if clause.

After all, the output should move a step below, because it should not make an output in every loop, that would overwrite the last content.

function loopNum() {
    var numbers = [1, 2, 3, 4, 5, 6],
        text = '';

    for (var i = 0; i < numbers.length; i++) {
        if (i % 2 == 0) {
            text += i + " is even<br>";
        } else {
            text += i + " is odd<br>";
        }
    }
    document.getElementById("loopNumbers").innerHTML = text;
}

<p>Click the button to print odd and even numbers</p>
<button onclick="loopNum()">Click me</button>
<p id="loopNumbers"></p>

edited Jan 24, 2017 at 16:09

answered Jan 24, 2017 at 15:53

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Shmoes Over a year ago

Thank you so much - I have spent hours trying to figure out what I was doing wrong!!

jumps4fun · Accepted Answer · 2017-01-24 15:57:46Z

0

Your += is misplaced. Instead of adding to the text variable, you are assigning a string value to i. Change to this, and it will work.

if (i % 2 ==0){
   text += (i + " is even");
}
else if (i % 2 !=0){
   text += (i + " is odd");
}

answered Jan 24, 2017 at 15:57

jumps4fun

4,15810 gold badges54 silver badges100 bronze badges

Comments

Thomas D. · Accepted Answer · 2017-01-24 15:58:20Z

0

First of all, you are reassigning the loop variable i, which is a string after the assignment:

i += " some string "

You can not loop with an string variable.

Second issue you have will be that you re-assign the value of your p-element, so in the end you will only see one of you outputs. To get all outputs, you can for example append to the p-element:

function loopNum(){
var numbers = [1, 2, 3, 4, 5, 6]
var text;
for(var i = 0;i < numbers.length;i++){
  if (i % 2 ==0){
    text = i + " is even";
  }
  else if (i % 2 !=0){
    text = i + "is odd";
  }   
  document.getElementById("loopNumbers").innerHTML += text;
}

}

answered Jan 24, 2017 at 15:58

Thomas D.

1,0617 silver badges19 bronze badges

Collectives™ on Stack Overflow

For loop with if statement will not run more than once javascript

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related