JS code to create typing effect on load of welcome page for an array of strings that have words that read left-to-right as well as right-to-left

I structured the typing effect to type as well as delete before typing the next string in my array. The structure I used for my code is adapted from the code on UsefulAngle.com: https://usefulangle.com/post/75/typing-effect-animation-javascript-css

I run into several issues refactoring the code:

1. I tried to refactor the Type and Delete functions (not shown; they are shown in the link in first paragraph above and that actual code works and is in my remote JS file). I attempted to refactor into TypeRTL and DeleteLTR functions respectively (shown in code snippet below). It did not work.

2. Even if I were to succeed in refactoring to accommodate TypeRTL and DeleteLTR code, I run into the problem of only being able to run one line of code that can't be in an if-else statement to have the typing effect occur on load of page. I would have to choose between typing LTR and typing RTL because I would need to specify in one line of code: _INTERVAL_VAL = setInterval(Type, 100); OR _INTERVAL_VAL = setInterval(TypeRTL, 100);

3. For right-to-left words, such as in Arabic, I want to make sure that typing actually is from right to left, taking the rightmost character as the first thing to print. I would imagine that I would have to split() the string, thereby getting an array, reverse() the order in the array, join() so that the rightmost character really does print first. Is my assumption correct in handling these right-to-left words in order for the right-to-left typing effect to work?

   • I've unsuccessfully refactored the JS for TypeRTL and DeleteLTR functions.
   • I've unsuccessfully refactored to have the typing effect work for right-to-left words and left-to-right words to sequentially be typed out and deleted on load.
   • As a non-Arabic reader, I'm also baffled if I would have to create a function to split the characters in the word into an array, reverse them, and re-string them OR if the substring method (shown in code below) would work... Can any Arabic reader-coders out there answer this question?

********** HTML *************

    <div id="text"></div>
        <div id="cursor-ltr"></div>
        <div id="cursor-rtl"></div>
   </div>

********** CSS *************

#container {
    text-align: center;
}

#text {
    display: inline-block;
    vertical-align: middle;
    color: orange;
    letter-spacing: 2px;
}

#cursor-rtl {
    display: inline-block;
    vertical-align: middle;
    width: 3px;
    height: 50px;
    background-color: orange;
    animation: blink .75s step-start infinite;
}

@keyframes blink {
    from, to { 
        background-color: transparent 
    }
    50% { 
        background-color: orange; 
    }
}

********** JS *************
// List of strings
var _CONTENT = [ 
    "Twinkle", //English
    "وميض", //Arabic
    "טווינגקאַל", //Yiddish
    "estrella" //Spanish
];

// Current string being processed
var _PART = 0;

// Character number of the current string being processed 
var _PART_INDEX = 0;

// Holds the handle returned from setInterval
var _INTERVAL_VAL;

// Element that holds the text
var _ELEMENT = document.querySelector("#text");

// Cursor element 
var _CURSOR = document.querySelector("#cursor-rtl");

// Implements typing effect
function TypeRTL() { 
    var toReverseArr = _CONTENT[_PART].split();
    var reversedArr = toReverseArr.reverse();
    var stringify = reversedArr.join("");

    // Get substring with 1 character added
    var text = stringify.substring(_PART_INDEX, 0);
    _ELEMENT.innerHTML = text;
    _PART_INDEX++;

    // If full sentence has been displayed then start to delete the sentence after some time
    if(text === _CONTENT[i]) {
    // Hide the cursor
    _CURSOR.style.display = 'none';

    clearInterval(_INTERVAL_VAL);
    setTimeout(function() {
            _INTERVAL_VAL = setInterval(DeleteLTR, 50);
    }, 1000);
    }
}


// Implements deleting effect
function DeleteLTR() {
    // Get substring with 1 character deleted
    var text =  _CONTENT[_PART].substring(0, _PART_INDEX - 1);
    _ELEMENT.innerHTML = text;
    _PART_INDEX--;

    // If sentence has been deleted then start to display the next sentence
    if(text === '') {
        clearInterval(_INTERVAL_VAL);

    // If current sentence was last then display the first one, else move to the next
    if(_PART == (_CONTENT.length - 1))
    _PART = 0;
        else _PART++;

    _PART_INDEX = 0;

    // Start to display the next sentence after some time
    setTimeout(function() {
        _CURSOR.style.display = 'inline-block';
        _INTERVAL_VAL = setInterval(TypeRTL, 100);
    }, 200);
    }
}

// Start the typing effect on load
_INTERVAL_VAL = setInterval(TypeRTL, 100);