Javascript for-loop executes code only one time

Question

I have a problem that a for-loop executes its code just one time instead of the given number times.

If I put something thats not a number into the textfield I get the Error and console.log() shows me the number I put in the textbox.

It doesnt matter what code it would execute, I tried that aswell.

Code:

function Mehrere() {

    var Anzahl = document.getElementById("Anzahl").value;
    var AnzahlInt = parseInt(Anzahl);
    console.log(AnzahlInt);

    if (AnzahlInt > 0) {
        for (i = 0; i < AnzahlInt; i++) {
            Kreis();
        }
    } else {
        alert("Error");
    }
}

Thank you very much for your help :)

Nope. That loop will definitely run more than once, provided `AnzahlInt` is `> 1`. [Proof](http://jsfiddle.net/8cer4bge/) But it won't if `Kreis` changes `i`. — T.J. Crowder, Oct 31 '15 at 09:33
What does Kreis() do? Also Please use `for (var i=0...` in case some other loop accesses the now global var `i` — mplungjan, Oct 31 '15 at 09:33

T.J. Crowder · Accepted Answer · 2015-10-31T09:37:38.007

Your code is falling prey to The Horror of Implicit Globals because you haven't declared i. I'm guessing that the function Kreis, which you haven't shown, also uses a global i. So when you call Kreis the first time, you change the value of i so it's higher than the loop limit.

Example:

function Mehrere() {

    var Anzahl = document.getElementById("Anzahl").value;
    var AnzahlInt = parseInt(Anzahl);
    console.log(AnzahlInt);

    if (AnzahlInt > 0) {
        for (i = 0; i < AnzahlInt; i++) {
            Kreis();
        }
    } else {
        alert("Error");
    }
}
function Kreis() {
  snippet.log("In Kreis, changing i to 20");
  i = 20;
}
Mehrere();

<input type="text" id="Anzahl" value="10">
<!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="//tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

Moral: Declare your variables:

function Mehrere() {
    var i;                   // <==============================

    var Anzahl = document.getElementById("Anzahl").value;
    var AnzahlInt = parseInt(Anzahl);
    console.log(AnzahlInt);

    if (AnzahlInt > 0) {
        for (i = 0; i < AnzahlInt; i++) {
            Kreis();
        }
    } else {
        alert("Error");
    }
}
function Kreis() {
  snippet.log("In Kreis, changing i to 20");
  i = 20;
}
Mehrere();

<input type="text" id="Anzahl" value="10">
<!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="//tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

yep thats it thank you man – DoodleSchrank Oct 31 '15 at 09:38 — DoodleSchrank, Oct 31 '15 at 09:38

Kaushik · Answer 2 · 2015-10-31T09:43:01.440

0

Use let keyword. You are using i as global variable. which might be killing your loop. or you can use var also. let reference

function Mehrere() {

    var Anzahl = document.getElementById("Anzahl").value;
    var AnzahlInt = parseInt(Anzahl);
    console.log(AnzahlInt);

    if (AnzahlInt > 0) {
        for (var i = 0; i < AnzahlInt; i++) {
            Kreis();
        }
    } else {
        alert("Error");
    }
}

Browser compatibility of let keyword.

edited Oct 31 '15 at 09:43

answered Oct 31 '15 at 09:36

Kaushik

2,072
1
23
31

1

Since all browsers support `let` right? `var` works in ALL browsers – mplungjan Oct 31 '15 at 09:37
@mplungjan Yeah i was just adding the compatibility table. Sorry for the delay. :P – Kaushik Oct 31 '15 at 09:41

Javascript for-loop executes code only one time

2 Answers2