Animated words printing and erasing words in array-CodePudding

<!--HTML-->
  <main>
        <h1 id="aboutMe">ABOUT ME</h1>
        <p>I am <span id="words"></span></p>
        <script src="main.js"></script>
  </main>

/*JS*/
const dynamicWords = document.getElementById('words');


const wordsArrays = ["learning drawing", "coding", "Chinese language"];
let wordsArray = 0;
let wordsLetter = 0;
 const typingSpeed = 90;
const erasingSpeed = 100;

    function printLetters(wordsPrint) {
        if(wordsLetter < wordsPrint.length) {
            dynamicWords.textContent  = wordsPrint.charAt(wordsLetter); wordsLetter  ;
            setTimeout(function() {
                printLetters(wordsPrint)
            }, typingSpeed)
            
        } else if(wordsLetter == wordsPrint.length) {
                clearLetters();
            }
            }
        
        function clearLetters() {
            if(wordsLetter > -1) {
                let updatedWord = "";
                for(let index = 0; index < wordsLetter; index  ) {
                    updatedWord  = wordsArrays[wordsArray].charAt(index);
                    dynamicWords.textContent = updatedWord;
                    wordsLetter -= 1;
                    setTimeout(clearLetters, erasingSpeed)
                }
            } else if (wordsLetter == -1) {
                wordsArray = (wordsArray   1) % wordsArrays.length;
                wordsLetter = 0;
                printLetters(wordsArrays[wordsArray])
            }
        }

    printLetters(wordsArrays[wordsArray]);

QUESTIONS:

With this code, the result is [learning drawing] is printed smoothly but the erasing part stuck, leaving just [l] word left and not moving to other array, what is wrong with the code?
I am still learning, and can anyone enlightened me in the function clearLetters(), what is -1 supposed to represent? (from what i know is -1 represent the last letter, but it seems not the case with this code?) i understand the code except for what >-1 and ==-1 represent. please explain.

thank you.




QUESTIONS:
1) With this code, the result is [learning drawing] is printed smoothly but the erasing part stuck, leaving just [l] word left and not moving to other array, what is wrong with the code?

2) I am still learning, and can anyone enlightened me in the function clearLetters(), what is -1 supposed to represent? (from what i know is -1 represent the last letter, but it seems not the case with this code?) i understand the code except for what >-1 and ==-1 represent. please explain.

thank you.

CodePudding user response：

You just need to move a few lines out of your second for loop.
when it says > -1 it is checking if your wordsLetter has decreased all the way to 0 and gone past, to -1. (> is the "greater than" operator, so it's checking if wordsLetter is greater than -1). The code == checks if two expressions are equal. So if wordsLetter is -1, then wordsLetter == -1.

/*JS*/
const dynamicWords = document.getElementById('words');


const wordsArrays = ["learning drawing", "coding", "Chinese language"];
let wordsArray = 0;
let wordsLetter = 0;
 const typingSpeed = 90;
const erasingSpeed = 100;

    function printLetters(wordsPrint) {
        if(wordsLetter < wordsPrint.length) {
            dynamicWords.textContent  = wordsPrint.charAt(wordsLetter); wordsLetter  ;
            setTimeout(function() {
                printLetters(wordsPrint)
            }, typingSpeed)
            
        } else if(wordsLetter == wordsPrint.length) {
                clearLetters();
            }
            }
        
        function clearLetters() {
            if(wordsLetter > -1) {
                let updatedWord = "";
                for(let index = 0; index < wordsLetter; index  ) {
                    updatedWord  = wordsArrays[wordsArray].charAt(index);
                }
                dynamicWords.textContent = updatedWord;
                wordsLetter -= 1;
                setTimeout(clearLetters, erasingSpeed)
            } else if (wordsLetter == -1) {
                wordsArray = (wordsArray   1) % wordsArrays.length;
                wordsLetter = 0;
                printLetters(wordsArrays[wordsArray])
            }
        }

    printLetters(wordsArrays[wordsArray]);

<!-- HTML-->
  <main>
        <h1 id="aboutMe">ABOUT ME</h1>
        <p>I am <span id="words"></span></p>
        <script src="main.js"></script>
  </main>