TypeWriter Change Text-CodePudding

I have a website on glitch and i was test and playing with some with code.

I decided i wanted to try to make typewriter text!

Someone on StackOverFlow helped me figure that out but now i have another question.

I am wanting to make the typewriter text change and switch to another set of text when you click the button again.

I cannot do that without reloading the whole page or making the site reload with code. Does anyone know another way?

My Code:

URL is being Deleted...
<br>
<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 code is what makes the typewriter work!

I have been looking and researching how to do it but had no luck on finding how to make it change the text. The button will not write different text.

a better why would be if someone could help me make the text change itself every 10 seconds.
Anyone have any idea? I have no clue how to do this :(

CodePudding user response：

So you need to reset the timeout and you need to reset your variables

var timer;
var i;
var txt;

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

function anotherSentence () {
  if (timer) window.clearTimeout(timer);
  i = 0;
  txt = randomText();
  typeWriter();
}

anotherSentence();

CodePudding user response：

I am wanting to make the typewriter text change and switch to another set of text when you click the button again.

let i = 0;      
const speed = 2;
let txt = '';
const out = document.getElementById('demo');
    
function start() {
  demo.innerHTML = '';
  console.log('click');
  txt = randomText();
  i = 0;
  typeWriter();  
}

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;
    }

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

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

  <script>

  </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>