How can I stop typing effect after second line?

user_10600708 0
Viewed 60

I want to stop typing when it writes the second line. Just Display the Second line, should not execute again, and when it stops right border should be none. Anybody, please help me I need to fix it now.

var _CONTENT = [ "First line.", "Second Line." ];
var _PART = 0;
var _PART_INDEX = 0;
var _INTERVAL_VAL;
var _ELEMENT = document.querySelector("#text");
function Type() { 
    var text =  _CONTENT[_PART].substring(0, _PART_INDEX + 1);
    _ELEMENT.innerHTML = text;
    _PART_INDEX++;
    if(text === _CONTENT[_PART]) {
        clearInterval(_INTERVAL_VAL);
        setTimeout(function() {
            _INTERVAL_VAL = setInterval(Delete, 50);
        }, 1000);

    }
}
function Delete() {
    var text =  _CONTENT[_PART].substring(0, _PART_INDEX - 1);
    _ELEMENT.innerHTML = text;
    _PART_INDEX--;
    if(text === '') {
        clearInterval(_INTERVAL_VAL);
        if(_PART == (_CONTENT.length - 1))
            _PART = 0;
        else
            _PART++;
        _PART_INDEX = 0;
        setTimeout(function() {
            _INTERVAL_VAL = setInterval(Type, 100);
        }, 200);
clearInterval(_CONTENT);

    }
}
_INTERVAL_VAL = setInterval(Type, 100);
#text {
    display: inline-block;
    color: #000;
    font-size: 50px;
    border-right: 6px solid #000;
    font-weight: bold;
    font-family: Mermaid;
}
<div id="hello-content">
    <h1><div id="text"></div></h1>
</div>

javascript-objects dom-events html javascript
1 Answers

var _CONTENT = [ "First line.", "Second Line." ];
var _PART = 0;
var _PART_INDEX = 0;
var _INTERVAL_VAL;
var _ELEMENT = document.querySelector("#text");
function Type() { 
    var text =  _CONTENT[_PART].substring(0, _PART_INDEX + 1);
  
   
    _ELEMENT.innerHTML = text;
    _PART_INDEX++;
     if(text==="Second Line."){

      clearInterval(_INTERVAL_VAL);
    }
    else if(text === _CONTENT[_PART] ) {
        clearInterval(_INTERVAL_VAL);
        setTimeout(function() {
            _INTERVAL_VAL = setInterval(Delete, 50);
        }, 1000);

    }
}
function Delete() {
    var text =  _CONTENT[_PART].substring(0, _PART_INDEX - 1);
    _ELEMENT.innerHTML = text;
    _PART_INDEX--;
    if(text === '') {
        clearInterval(_INTERVAL_VAL);
        if(_PART == (_CONTENT.length - 1))
            _PART = 0;
        else
            _PART++;
        _PART_INDEX = 0;
        setTimeout(function() {
            _INTERVAL_VAL = setInterval(Type, 100);
        }, 200);
clearInterval(_CONTENT);

    }
}
_INTERVAL_VAL = setInterval(Type, 100);
<div id="hello-content">
    <h1><div id="text"></div></h1>
</div>

user_22339590
Related