How To Create Typing Effect Onclick Of Button In JavaScript

admin_img Posted By Bajarangi soft , Posted On 27-11-2020

In Javascript we can type automatically on click of button .So today we discuss how to do it.

How To Create Typing Effect Onclick Of Button In JavaScript

Complete Code For Creating Typing Effect Onclick Of Button In JavaScript.

<!DOCTYPE html>
<html>
<head>
    <title>How To Create Typing Effect Onclick Of Button In JavaScript</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
</head>
<style>
    body {
        background: black;
    }

    #div1 {
        font-size: 48px;
        padding: 10px;
    }

    #div2 {
        font-size: 48px;
        padding: 10px;
    }

    #div3 {
        font-size: 48px;
        padding: 10px;
    }
</style>

<body>

<div class="container">
    <br/><br/>
    <div class="text-center">
        <h1 id="color" style="color: white;">Create Typing Effect Onclick Of Button In JavaScript</h1>
    </div>
    <div class="well">
        <button class="btn btn-primary" onclick="typeWriter()">Click me</button>

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

        <script>
            var i = 0;
            var txt = 'Hello world! Welcome to BajarangiSoft';
            var speed = 50;

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

Related Post