如何使用.querySelectorAll 使用 javascript 創建打字機效果？

Question

希望我能深入了解為什么我的代碼不適用於.querySelectorAll 但它適用於getElementById？

我最近發現 .querySelectorAll 傳遞了一個數組，所以我嘗試將我制作的這段代碼片段放入 for 循環中，效果不再有效？ 我有沒有機會了解為什么這段代碼沒有像原來那樣“打字”？

提前致謝！

    <!-- HTML -->

    <div class="style">
      <p id="demo" class="type" onclick="typeWriter()">
        Click Me
      </p>
    </div>

    //Js global variables 
      let typewriter = "Write out this sentence";
      let speed = 50; //speed in milliseconds
      let p = 0; //number of letters in string


    //Js with .getElementById
 function typeWriter() {
    if (p < typewriter.length) {
      document.getElementById("demo").innerHTML += typewriter.charAt(p);
      p++;
      setTimeout(typeWriter, speed);
    }
  }
    //Js with .querySelectorAll

    function typeWriter() {
          let cycle, i; //establish the cycle and counter
          cycle = document.querySelectorAll(".type"); //cycle includes the .type class
          for (i = 0; i < cycle.length; i++) { //for loop that actually cycles
            while (p < typewriter.length) {
                  cycle[i].innerHTML += typewriter.charAt(p);
                  p = p + 1;
                  setTimeout(typeWriter, speed);
                }
              } 
            };

Answer 1

因為您使用的是while不是if 。

因此， typewriter.charAt(p)將幾乎立即顯示，並且p幾乎立即遞增。

只需將while更改為if就像您在使用getElementById時所做的那樣。

 //Js global variables let typewriter = "Write out this sentence"; let speed = 50; //speed in milliseconds let p = 0; //number of letters in string function typeWriter() { let cycle, i; //establish the cycle and counter cycle = document.querySelectorAll(".type"); //cycle includes the.type class for (i = 0; i < cycle.length; i++) { //for loop that actually cycles if (p < typewriter.length) { cycle[i].innerHTML += typewriter.charAt(p); p = p + 1; setTimeout(typeWriter, speed); } } };

 <div class="style"> <p id="demo" class="type" onclick="typeWriter()"> Click Me </p> </div>

Answer 2

我擺脫了while循環，它似乎工作

 //Js global variables let typewriter = "Write out this sentence"; let speed = 50; //speed in milliseconds let p = 0; //number of letters in string //Js with.getElementById function typeWriter() { if (p < typewriter.length) { document.getElementById("demo").innerHTML += typewriter.charAt(p); p++; setTimeout(typeWriter, speed); } } //Js with.querySelectorAll function typeWriter() { let cycle, i; //establish the cycle and counter cycle = document.querySelectorAll(".type"); //cycle includes the.type class for (i = 0; i < cycle.length; i++) { //for loop that actually cycles cycle[i].innerHTML += typewriter.charAt(p); p =p + 1; setTimeout(typeWriter, speed) } };

 <!-- HTML --> <div class="style"> <p id="demo" class="type" onclick="typeWriter()"> Click Me </p> </div>