Create a Typewriter Effect with another Variable-CodePudding

I am looking to make a typewriter effect using a Variable. My Variable will select a random string listed to write. I want it to list the string the same way, but i want it to use the typewriter effect to do it!

No matter where i look, i cannot find an answer on how to make the typewriter effect, it will not type the function! I want it to type a random text based on the variable! Thanks!

this is my code.

Finalising Deletion...
<progress></progress>
<!DOCTYPE html>
<html>
<body>

<br><br>

<button onclick="typeWriter()">View Status</button>

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

<script>
var i = 0;
var txt = randomText();
var speed = 50;

function typeWriter() {
  if (i < txt.length) {
    document.getElementById("demo").innerHTML  = (i);
    i  ;
    setTimeout(typeWriter, speed);
  }
}
  function randomText() {
              //array splashes
              var say = [];
              say[0] = "Moving Core Files...";
              say[1] = "Deleting JavaScript";
              say[2] = "Uploading Data...";
              say[3] = "Editing HTML...";
              say[4] = "Disabling Server.js";
              say[5] = "Deleting Cookies...";
              say[6] = "Deleted Files (3/754)";
              say[7] = "Attempting URL Shutdown";
              say[8] = "Uploading Deletion Program!";
              say[9] = "Deleting URL...";
              say[10] = "Changing CSS";
              say[11] = "Deleting Inside Fules...";
             
           
              
              //pick a random greeting
              var howmany = 11;
              var bRand = 0;
              bRand = Math.random();
              bRand = Math.floor(bRand * howmany);
              //prepare and docwrite the greeting
              sayWhat = say[bRand];
              document.write(sayWhat);
              document.close();
              //direct type in html p element
              //document.getElementById("splash").innerHTML ='javascript:alert("'   '");'
              // I tried to make this work but it says no.
            }
  
</script>

</body>
</html>
  <script style="color:white" language="JavaScript" type="text/javascript">
            //script to generate random greetings
            
    </script>
    <script style="color:white" type="text/javascript">
      
    </script>

CodePudding user response：

Well your randomText function doesn't return anything. So the variable txt is always undefined. You need to add return sayWhat at the end of your randomText function.

Furthermore in your typeWriter function you are appending the actual index of the letter not the letter itself. By replacing = (i) with = txt[i] that is solved aswell.

If you don't want to show the initial value you need to remove the document.write line aswell.

<progress></progress>
<!DOCTYPE html>
<html>
<body>
  <br><br>
  <button onclick="typeWriter()">View Status</button>

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

  <script>
    var i = 0;
    var txt = randomText();
    var speed = 50;

    function typeWriter() {
      if (i < txt.length) {
        document.getElementById("demo").innerHTML  = txt[i];
        i  ;
        setTimeout(typeWriter, speed);
      }
    }

    function randomText() {
      //array splashes
      var say = [];
      say[0] = "Moving Core Files...";
      say[1] = "Deleting JavaScript";
      say[2] = "Uploading Data...";
      say[3] = "Editing HTML...";
      say[4] = "Disabling Server.js";
      say[5] = "Deleting Cookies...";
      say[6] = "Deleted Files (3/754)";
      say[7] = "Attempting URL Shutdown";
      say[8] = "Uploading Deletion Program!";
      say[9] = "Deleting URL...";
      say[10] = "Changing CSS";
      say[11] = "Deleting Inside Fules...";



      //pick a random greeting
      var howmany = 11;
      var bRand = 0;
      bRand = Math.random();
      bRand = Math.floor(bRand * howmany);
      //prepare and docwrite the greeting
      sayWhat = say[bRand];
      //direct type in html p element
      //document.getElementById("splash").innerHTML ='javascript:alert("'   '");'
      // I tried to make this work but it says no.
      
      return sayWhat;
    }
  </script>

</body>

</html>
<script style="color:white" language="JavaScript" type="text/javascript">
  //script to generate random greetings
</script>
<script style="color:white" type="text/javascript">
</script>