How to add Typing Effect / Type Writer Effect to your text Using JavaScript

How to add Typing Effect / Type Writer Effect to your text Using JavaScript

 

Step 1) Add HTML:

<h1>Typewriter</h1>

 <!-- Adding button -->
<button onclick="typeWriter()">Click me</button>

<p id="typeeffect"></p>

Step 2 : Adding JavaScript

<script>
var i = 0;
var txt = 'This a type writer effect demo.';
var speed = 50;

function typeWriter() {
  if (i < txt.length) {
    document.getElementById("typeeffect").innerHTML += txt.charAt(i);
    i++;
    setTimeout(typeWriter, speed);
  }
}
</script>

Final Output and Code will look like this

How to add Typing Effect / Type Writer Effect to your text Using JavaScript
You may Also Like
Scroll to top