How to add css or javascript repeatable typewriter effect by click of a button on var phraseArray sentences?

Question

I have fifty sentences in java script as var phraseArray. They are picked randomly on button click. I want that the same button would also show typewritter effect on those var phraseArray sentences, not once, but with ability to restart or reset when next time clicking. Dont know how to apply this effect on js sentences ?

I have tried doing the typewritter effect in css, does not work

Link to code > https://codepen.io/karolis-rusevicius/pen/vvpJLw

<button class="b" onclick="completeSentence(phraseArray, 'randomAdjective')"><span >Talk</span></button>

   <p id="randomAdjective" class="label label-success"><blink>_</blink>`</p>`
function PickRandomWord(frm) {

// Generate a random number between 1 and NumberOfWords

var rnd = Math.ceil(Math.random() * NumberOfWords)

// Display the word inside the text box
frm.WordBox.value = words[rnd]}

var phraseArray = [
               "Androids dream of electric sheep at the              incubators<blink>_</blink>",

               "Robot will feed you tomatoes while you run<blink>_</blink>",

               "Just like the simulations<blink>_</blink>",

               "Read the manual while farming<blink>_</blink>",

               "Just Quick and easy hardware muffin with electric simulations on top<blink>_</blink>",

               "I thought bitmap asteroids would fit here<blink>_</blink>",

               "In this world virtual reality is created for laboratory animals<blink>_</blink>",

               "Cyborg bacteria outperforms digital pigeons at farming funny jokes<blink>_</blink>",

               "Bacteria recognition systems are virtual, just like reality<blink>_</blink>",

               "Simulations are created for neural patterns<blink>_</blink>",

               "new software update is available! At our laboratory<blink>_</blink>",

               "We have updated our privacy policy, please accept it at our neural laboratory<blink>_</blink>",

               "By accepting our policy, you agree to our upgraded terms and androids<blink>_</blink>",

               "My hardware feed the digital software<blink>_</blink>",

               "My computers run all the simulations<blink>_</blink>",

               "The sky is very #6698FF today<blink>_</blink>",

               "Here are bitmap asteroids spilled all over the reality<blink>_</blink>",

               "The created robot entered the cyborg forest<blink>_</blink>",

               "Androids skin is soft as rubber soft gets, just like humanoid rubber<blink>_</blink>",

               "I will fit in this humanoid tisue, no cyborg bacteria can attack me while I wear it.<blink>_</blink>",

               "Would you consider donating your hardware ? It can save meany robot lives<blink>_</blink>",

               "Humanoid software is fit for farming, bitmap asteroids dont lie.<blink>_</blink>",

               "We have created a new policy, no pants are allowed in our reality. All users will degrade to digital pigeons<blink>_</blink>",

               "Pigeons fly, but in digital reality, they run the marathons<blink>_</blink>",

               "Electric squirrels are demaging our neural software while they feed on our cyborg bacteria<blink>_</blink>",

               "Humanoid beeings are sickly. I mean you are fragile, we need to run you throught neural laboratory<blink>_</blink>",

               "Do animals fly throught bitmap arcks?<blink>_</blink>",

               "The new policy allows farming on the outskirts of humanoid laboratory<blink>_</blink>",

               "How is your hardware ? You can replace it at our world<blink>_</blink>",

               "You know, the robot behind you is just recording.<blink>_</blink>",

               "Asteroids...ahhh. If only I could infuse them with pigeons...<blink>_</blink>",

               "Dont assume cyborg hardware<blink>_</blink>",

               "To be virtual bacteria or not to be?<blink>_</blink>",

               "Upgraded androids prooved. Simulations can exist in virtual world<blink>_</blink>",

               "Here is a joke for you: what do you call a robot without tea? A robo<blink>_</blink>",

               "Today it is bitmap world day!! Happy bitmaping!<blink>_</blink>",

               "While I run the policy of million'o'muffins a day, you can have one<blink>_</blink>",

               "Pigeons have updated software<blink>_</blink>",

               "If I get elected, asteroids will have rights to fly above<blink>_</blink>",

               "Virtual computers like compliments<blink>_</blink>",

               "I should go back to farming digital protons...<blink>_</blink>",

               "Shlugs would like to have some spare electric rods<blink>_</blink>",

               "Here we feed neural computers<blink>_</blink>",

               "teach computers how to eat and they will feed them selfs<blink>_</blink>",

               "I have created electric metal brush, keeps your metal fresh<blink>_</blink>",

               "In this world it is posible for computers to achieve motherhood<blink>_</blink>",

              ];





function randomIndex(arr){
  return Math.floor((Math.random() * arr.length));
}

function completeSentence(arr, loc){
  index = randomIndex(arr);
  document.getElementById(loc).innerHTML = arr[index];
}

Answer 1

Do you want something like this codepen:

Link

Added the following snippet:

function completeSentence(arr, loc){
  index = randomIndex(arr);
  var str = arr[index];
  for(let i=0; i<str.length; i++){
    setTimeout(function(){
   document.getElementById(loc).innerHTML = str.substr(0,i);
  },500+i*80);
}