clearInterval in loop don't work as expected

user_16733810 0
Viewed 64

I have a problem When I delete the letters, the word remains

I have two h1 I delete the word from each h1 and when all the letters are deleted I stop the interval for each h1 specially for it

img

let mySelector = document.querySelectorAll(".writ-text");
for (let l = 0; l < mySelector.length; l++) {

  removeText = setInterval(function() {

    // Cut the last letter of the word and print the word after editing
    document.querySelectorAll(".writ-text")[l].textContent =
      document.querySelectorAll(".writ-text")[l].textContent.substr(0,
        document.querySelectorAll(".writ-text")[l].textContent.length - 1);

    // Check if the entire word has been deleted
    if (document.querySelectorAll(".writ-text")[l].textContent.length == 0) {
      clearInterval(removeText)
    }
  }, 1000);
}
<h1 class="writ-text">gold</h1>
<h1 class="writ-text">golder</h1>

clearinterval for-loop html javascript
1 Answers

You have cleared the only setInterval named removeText(global scoped) which makes it for both text.
Use a block scope like let const to work out

let mySelector = document.querySelectorAll(".writ-text");
for (let l = 0; l < mySelector.length; l++) {

 let removeText = setInterval(function() {

    // Cut the last letter of the word and print the word after editing
    document.querySelectorAll(".writ-text")[l].textContent =
      document.querySelectorAll(".writ-text")[l].textContent.substr(0,
        document.querySelectorAll(".writ-text")[l].textContent.length - 1);

    // Check if the entire word has been deleted
    if (document.querySelectorAll(".writ-text")[l].textContent.length == 0) {
      clearInterval(removeText)
    }
  }, 1000);
}
<h1 class="writ-text">gold</h1>
<h1 class="writ-text">golder</h1>

user_168463460
Related