top of page

Creating the Typing Effect in HTML

Below is the Example of creating the typing effect like "TYPEWRITER".


Code:

<!DOCTYPE html>
<html>
<body>

<h2>This is the Example of Typewriter.</h2>
<h3> Click the Button below to see the effect. </h3>

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

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

<script>
var i = 0;
var txt = 'Welcome to The Tech Platform.';
var speed = 50;

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

</body>
</html>

Output:







When you will click the button "Click me" you will see the TYPEWRITER effect

For better experience and understanding , try it yourself













Source: W3School


The Tech Platform

0 comments

Recent Posts

See All
bottom of page