How to make TypeWriter to write from start after click again-CodePudding

I need to make my Typewriter animation start on beginning after i click button "developer". Can't make it work. `

var i = 0;
var txt = "<!--Ahoj--> \n\n<name> Jmenuji se Tomáš Maixner </name>\n\n<description> Jsem front-end developer, grafický designer a web designer, ale umím toho mnohem víc. Mám zkušenosti se správou sociálních sítí, SEO, animací, produkcí i postprodukcí videa, 3D grafikou i fotografováním. </description>";
var speed = 50;

function typeWriter() {
  {
  if (i < txt.length) {
    var char = txt.charAt(i);
    document.getElementById("demo").innerHTML  = char == '\n' ? '<br>' : char;
    i  ;
    setTimeout(typeWriter, speed);
  }
  }
 }

function clearBox(demo) {
  document.getElementById("demo").style.display = "none";
  let i = 0;
  let char = txt.charAt(i);
}

function unclearBox(demo) {
  document.getElementById("demo").style.display = "block";
  typeWriter();
}


<h1>Typewriter</h1>

<div class=window>
 <div >
  
  <div id="developer" onclick="typeWriter(), unclearBox(demo)" ><span ><></span>Developer</div>
  <div onclick="clearBox(demo)" ><span >@</span>Designer</div>
  <div  ></div>
  <div >
    <div ></div>
    <div ></div>
<div ></div>
  </div>



 </div>
 <div id="coding-window" >
  <div >
   
  
   <p id="demo"></p>
   <p id="demo2"></p>
  </div>
 </div>
</div>

I have tried many things but most of them end up deleting my string. I've never been able restart animation from start.

CodePudding user response：

To make the animation start again when you click the "Developer" button, you can add the following code inside the unclearBox function:

function unclearBox(demo) {
  document.getElementById("demo").style.display = "block";
  // Reset the counter and clear the content of the element
  i = 0;
  document.getElementById("demo").innerHTML = "";
  typeWriter();
}

This will reset the counter i to 0 and clear the content of the element with the ID "demo", so when the typeWriter function is called again, it will start from the beginning.

Here is the complete code with the changes:

var i = 0;
var txt = "<!--Ahoj--> \n\n<name> Jmenuji se Tomáš Maixner </name>\n\n<description> Jsem front-end developer, grafický designer a web designer, ale umím toho mnohem víc. Mám zkušenosti se správou sociálních sítí, SEO, animací, produkcí i postprodukcí videa, 3D grafikou i fotografováním. </description>";
var speed = 50;

function typeWriter() {
  {
  if (i < txt.length) {
    var char = txt.charAt(i);
    document.getElementById("demo").innerHTML  = char == '\n' ? '<br>' : char;
    i  ;
    setTimeout(typeWriter, speed);
  }
  }
 }

function clearBox(demo) {
  document.getElementById("demo").style.display = "none";
  let i = 0;
  let char = txt.charAt(i);
}

function unclearBox(demo) {
  document.getElementById("demo").style.display = "block";
  // Reset the counter and clear the content of the element
  i = 0;
  document.getElementById("demo").innerHTML = "";
  typeWriter();
}