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

Question

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.

richbai90 · Accepted Answer · 2019-08-27 17:05:13Z

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);

Michael · Accepted Answer · 2019-08-27 17:05:17Z

0

Two problems: You need a window.word_count = 0 next to window.count = 0 at line 38. I believe word_count at line 30 needs to be window.word_count.

This will fix the skipped array item, but will introduce a new problem, which I'm sure you'll notice. I'll leave solving that item up to you.

answered Aug 27, 2019 at 17:05

Michael

5912 silver badges8 bronze badges

Comments

Luis Gurmendez · Accepted Answer · 2019-08-27 17:17:54Z

You should have to reset some things in the else clause:

    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{
                setTimeout(function () {
                    d.classList.add("selected");
                    }, 1000);
                    setTimeout(function(){
                  window.count = 0;
                   window.word_count = 0;
                   d.classList.remove("selected");
                   d.innerHTML = '';
                    aLoop();
                  }, 2000)

                }
            }    
            aLoop();

        }, 1000);

Try to separate things in functions to understand better what you are doing! Sometimes recursive things are kinda messy if you don't separate and name things

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related