recursive function bug skips the first element in array on the second run

Welcome to Programming Tutorial official website. Today - we are going to cover how to solve / find the solution of this error recursive function bug skips the first element in array on the second run on this date .

i have this function that prints every letter from array. here is a link to jsFiddle:

https://jsfiddle.net/yaroslav_cherednikov/ypbuhmqv/71/

it works well on the first run but then skips the first element in array on the second run

    var a = ["Saab", "Volvo", "BMW", "renault"];
var d = document.getElementById('out');
var c = document.getElementById("cursor"); 
window.count = 0;
window.word_count = 0;

setTimeout(function () {
    c.style.visibility = 'visible';
    function aLoop() {
        setTimeout(function () {
                if(window.count < a.length){
                    return lettersPrint(a[window.count]);
                }
        }, 50);
    }
    function lettersPrint(word) {
        if (window.word_count < word.length) {
            setTimeout(function () {
                d.innerHTML += word[window.word_count];
                window.word_count++;
                return lettersPrint(word);
            }, 100);
        }
        else if( window.count < (a.length - 1) ){
            setTimeout(function () {
            d.classList.add("selected");
            }, 1000);
            setTimeout(function () {
            window.count++;
            word_count = 0;
            d.classList.remove("selected");
            d.innerHTML = '';
            return aLoop();
                
            }, 2000);
        }
        else{
            window.count = 0; 
            aLoop();
        }
    }    
    aLoop();

}, 1000);
.typer-txt {
    font-size: 2vw;
    color: #378bd8;
    display: inline-block;
}
#cursor {
    float: right;
    color: #b9b9b9;
    animation: pulse 0.5s infinite;
    visibility: hidden;
}
#out {
    display: inline;
}
.selected {
    background-color: #378bd8;
    color: white;
}
@-webkit-keyframes h1-slide-up {
    0%   {top:100px; opacity: 0;}
    100% {top:0px;     opacity: 1;}	
}

@keyframes pulse {
    0% {
        opacity: 0
    }
    
    100% {
        opacity: 1;
    }
}
<div class="typer-txt remove" id="typer-txt"><span id="cursor">|</span><div id="out" class=""></div></div>

this is first time i deal with a recursive function so i might have messed something. any help would be much appreciated.

Answer

You are not resetting the word count when you are on the last word. I’ve updated your code and refactored the highlight and erase portion into its own function

    var a = ["Saab", "Volvo", "BMW", "renault"];
    var d = document.getElementById('out');
    var c = document.getElementById("cursor"); 
    window.count = 0;
    window.word_count = 0;

        setTimeout(function () {
            c.style.visibility = 'visible';
            function aLoop() {
                setTimeout(function () {
                        debugger;
                     if(window.count < a.length){
                         return lettersPrint(a[window.count]);
                     }
                }, 50);
            }
            function highlightAndErase(winCount) {
               setTimeout(function () {
                    d.classList.add("selected");
                    }, 1000);
                    setTimeout(function () {
                    window.count = winCount
                    word_count = 0;
                    d.classList.remove("selected");
                    d.innerHTML = '';
                    return aLoop();

                    }, 2000);

            }
            function lettersPrint(word) {
                // previously was being missed after the last word due to the word_count not being reset
                if (window.word_count < word.length) {
                    setTimeout(function () {
                        d.innerHTML += word[window.word_count];
                        window.word_count++;
                       return lettersPrint(word);
                    }, 100);
                }
                else if( window.count < (a.length - 1) ){
                   highlightAndErase(++window.count)
                }
                else{
                    // previously was not resetting the word_count var
                    highlightAndErase(0)
                }
            }    
            aLoop();

        }, 1000);