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>

那是我的代码。我有两个循环。嵌套。

它不起作用。

在尝试调试控制台时查看控制台：

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未捕获的TypeError：无法读取null的属性“ innerHTML”       在footer.php：34

（匿名）@ footer.php：34

setTimeout（异步）

（匿名）@ footer.php：29

解密@ footer.php：44

onclick @ footer.php：49

footer.php：31 4

footer.php：32 1

footer.php：33 letter4

我不了解发生了什么。第一个for循环应从n = 0开始，进入第二个for循环，从i = 0到i = 9，回到第一个循环n = 1，再回到第二个循环i = 0到i = 9等的

它通过第一个for，n = 0到n = 4循环，然后通过i = 0到i = 9的第二个循环。

由于这样做，我无法测试其余的代码，因为没有id为letter4的HTML元素。

由于它可能会出现：我想做的是使用不同的字体，最终使用不同的符号字体，并进行类似https://medium.com/chingu/decrypting-effect-c5fc2a071354的“解密”样式效果...但略有不同，符号，而不是标准的字母和数字，而且操作简单明了。而且，一次输入一个字母，T第一，E第二，S第三，T第四，结果为“ TEST”

应该注意：我主要使用PHP，因此我编写JavaScript的方式几乎与使用PHP编写方式相同，而且由于我无法完全对其进行测试，所以我不知道该怎么做。可能还有其他问题（因此，如果您应该看到明显的东西，请告诉我）

嵌套循环JavaScript无法按预期循环

0 个答案: