Suppose I had some text from a div tag like this:

 <div id="outPutContainer">
     <div id="contentDiv" style="display:none;"> This is some cool content... </div>
 </div>

Now if I wanted to, I could create a JavaScript function that will print the characters one at a time and it will work just fine. Example below.

function printSentence(inner, outer, index, speed) {
    var input = document.getElementById(inner).innerHTML;
    var timer = setInterval(function(){
        document.getElementById(outer).innerHTML+=input.charAt(index);
        index++;
        if(index  == sentence.length -1){
            printResume(inner, outer, index+1, speed);
        }else{
           clearInterval(timer);
        }
     }, speed);
}

printSentence("contentDiv", "outPutContainer", 0, 100);

Again, the above function works just fine, however let’s say I wanted to take into account html tags within the element, how would that work. An example would be

<div id="contentDiv2"> This is some cool <strong>content</strong>
    <p>Paragraph of content</p>
</div>

How to create type writer effect using Javascript. Tutorial for beginners.

#javascript #programming