Nested Loop JavaScript not looping as expected

Question

function decrypt() {
  var word = "TEST";
  for (var n = 0; n <= 3; n++) {
    console.log("n = " + n);
    for (var i = 1; i <= 9; i++) {
      (function(i) {
        setTimeout(function() { // delay each iteration...for this test, every 3 seconds, slow enough to see the change and see what problems exist
          // Get Letter (A, B, C, etc.)
          console.log(n);
          console.log(i);
          console.log("letter" + n);
          var letter = document.getElementById("letter" + n).innerHTML;
          // Increment font number, i.e., font0 to font1, to font2, etc.
          document.getElementById("letter" + n).className = "font" + i;
          // If less than 10 increments, keep incrementing letter, A, B, C, D, etc.
          if (i != 9) {
            letter = String.fromCharCode(word.charCodeAt() + 1);
          }
          // If the final increment, return the next letter of the final word string
          else {
            letter = word.charAt(n);
          }
          // Change the letter displayed in the DIV
          document.getElementById("letter" + n).innerHTML = letter;
        }, 3000 * i);
      })(i);
    }
  }
}

@import url('https://fonts.googleapis.com/css?family=Lato|Unlock|Raleway');
.font0 {
  font-family: 'Lato', sans-serif;
}

.font1 {
  font-family: 'Unlock', sans-serif;
}

.font2 {
  font-family: 'Raleway', sans-serif;
}

.font3 {
  font-family: 'Lato', sans-serif;
}

.font4 {
  font-family: 'Unlock', sans-serif;
}

.font5 {
  font-family: 'Raleway', sans-serif;
}

.font6 {
  font-family: 'Lato', sans-serif;
}

.font7 {
  font-family: 'Unlock', sans-serif;
}

.font8 {
  font-family: 'Raleway', sans-serif;
}

.font9 {
  font-family: 'Lato', sans-serif;
}

<div id="letter0" class="font0">A</div>
<div id="letter1" class="font0">A</div>
<div id="letter2" class="font0">A</div>
<div id="letter3" class="font0">A</div>
<br /><br />
<button onclick="decrypt()">Click me</button>

That's my code. I have two loops. Nested.

It doesn't work.

Looking at my console, as I tried to debug it:

n = 0

footer.php:25 n = 1

footer.php:25 n = 2

footer.php:25 n = 3

footer.php:31 4

footer.php:32 1

footer.php:33 letter4

footer.php:34 Uncaught TypeError: Cannot read property 'innerHTML' of null at footer.php:34

(anonymous) @ footer.php:34

setTimeout (async)

(anonymous) @ footer.php:29

decrypt @ footer.php:44

onclick @ footer.php:49

footer.php:31 4

footer.php:32 1

footer.php:33 letter4

I'm not understanding what is happening. The first for loop should start n = 0, go into the second for loop, i = 0 through i = 9, back to the first loop, n = 1, back into the second for another round of i = 0 through i = 9, etc.

It loops through the first for, n = 0 through n = 4, then loops through the second for i = 0 through i = 9.

And since it does that, I cannot test out the rest of the code, as there is no HTML element with an id of letter4.

And since it'll probably come up: what I'm wanting to do is use different fonts, eventually different symbol fonts, and do a "decryption" style effect like https://medium.com/chingu/decrypting-effect-c5fc2a071354 ...but slightly different, symbols instead of standard letters and numbers, and being straightforward with what's going on. And, going one letter at a time, T first, E second, S third, T fourth, resulting in "TEST"

It should be noted: I work primarily with PHP, and so I've written the JavaScript mostly the same way I would have written it in PHP, and since I cannot test it out AT ALL, I don't know what other problems there may be (so if you should see something glaring, please let me know)

Don't use `var`, *especially* with `for` loops, *especially* with asynchronous code, use `const` or `let` instead — CertainPerformance, Dec 09 '18 at 04:54
@CertainPerformance Changing `var` to `const` in both `for` loops results in the first letter getting a font change, once. Changing `var` to `let` in both `for` loops results in `n` iterating through 0 to 3 first, and then changing the fonts for ALL the `div` elements at the same time, iterating through the fonts every three seconds. That's closer to what I wanted, but not quite. The first letter should iterate through `i` first, with `n = 0`, then iterate through `i` again with `n = 2`, etc. Each `n` being a new letter. — Witold Kowelski, Dec 09 '18 at 05:01
You can only use `const` when you aren't going to reassign - if you are going to reassign (best avoided if possible), use `let`. Looks like your issue now is figuring out the proper delays - you might consider `await`ing a `Promise` inside the loops directly, rather than `setTimeout`, to make the logic easier to follow than `setTimeout` — CertainPerformance, Dec 09 '18 at 05:16

Nested Loop JavaScript not looping as expected

0 Answers0