update variable based on self-calling setTimeout based function-CodePudding

I'm trying to create a "typewriter" function and use it to define a variable, so that each character is added individually based on a timeout function. The issue is it is only defining the very first character of the text.

<!DOCTYPE html>
<html>
<body>

<h1>Typewriter</h1>

<p id="demo"></p>

<script>
var i = 0;
var txt = 'Lorem ipsum dummy text blabla.';
var speed = 50;
var x = "" ;
x = typeWriter() ;

function typeWriter() {
  if (i < txt.length) {

    x  = txt.charAt(i) ;
    
    i  ;
    setTimeout(typeWriter, speed);
    
    return x ;
  }
}

document.getElementById("demo").innerHTML = x ;
</script>

</body>
</html>

** This is based on W3School's typewwriter How-To example. www.w3schools.com **

CodePudding user response：

You had a few mistakes:

most importantly, and the reason you were seeing no updates: the line document.getElementById("demo").innerHTML = x; was running only once, when the page first loaded. Your typeWriter function was updating x, but the value of x was never being reflected back in the UI
you don't want to set x = typeWriter(), as this overwrites the empty string that you correctly initially set x as, and means your function is trying to add a 1-character string to a function, which will produce a nonsensical result. You don't care about what typeWriter returns (which is why I've also removed the return x from it - that line does no harm but is completely irrelevant anyway), you just want to execute it, so I've replaced that line with simply typeWriter(). The important part is that now x starts off as the empty string, as you want.

See working version here with the above points fixed:

<!DOCTYPE html>
<html>
<body>

<h1>Typewriter</h1>

<p id="demo"></p>

<script>
var i = 0;
var txt = 'Lorem ipsum dummy text blabla.';
var speed = 50;
var x = "" ;
typeWriter() ;

function typeWriter() {
  if (i < txt.length) {

    x  = txt.charAt(i) ;
    
    i  ;
    setTimeout(typeWriter, speed);
    
    document.getElementById("demo").innerHTML = x ;
  }
}
</script>

</body>
</html>

CodePudding user response：

Other way to do the same:

<!DOCTYPE html>
<html>
<body>

<h1>Typewriter</h1>

<p id="demo"></p>

<script>
var txt = 'Lorem ipsum dummy text blabla.';
Array.from(txt).map((v,i,a)=>{setTimeout(()=>{document.getElementById("demo").innerHTML =v;},50*(i 1));})
</script>

</body>
</html>