JSFiddle - React, Tailwind, and code Playground

by ozzon91

HTML

<input type="button" value="Start" id="btn" onclick="button_click()">
<div id="el"></div>

CSS

#btn{ margin: 10px auto; width: 66px; font-size: 16pt; display: block;}
#el{ font-size: 16pt; padding: 5px; font-family: monospace;}

JavaScript

var txt = ' Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.';
var run = false;
var index = 0;

function button_click()
{
    run = !run;
    if ( run == true )
    {
        document.getElementById('btn').value = 'Stop';
        print_text();    
        return;
    }
    
    document.getElementById('btn').value = 'Start';
}

function print_text()
{
    if ( !run ) return;
    
    if ( index == txt.length )
    {
        run = false;
        index = 0;
        document.getElementById('btn').value = 'Start';
        return;
    }        
    
    document.getElementById('el').innerHTML = txt.substring(0, ++index);
    setTimeout(print_text, 150);   
}