简体   繁体   中英

Create a Typewriter Effect with another Variable

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> 

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>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM