Typing effect using javascript not working

Question

I want to create a type writer effect on a paragraph and repeat it after every 10 seconds but i don't want it to be repeated if the screen size is less than 768px?

I have created a typewriter function which prints words slowly using a setTimeout() function and when the whole paragraph is printed it waits for 5 seconds again starts printing from the beginning.

I wrote this code, but it is not working.

<!DOCTYPE html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <style type="text/css">
        .about p{
            color: #000;
            font-size: 22px;
        }
    </style>
</head>
<body>
    <div class="about"  onload="typeWriter();">
        <p id="text"></p>
    </div>
    <script>
        var i = 0;
        var w = window.matchMedia("(min-width: 768px)");
        var txt = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ';
        var speed = 50;
        function typeWriter() {
            if (i < txt.length) {
                document.getElementById("text").innerHTML += txt.charAt(i);
                i++;
                setTimeout(typeWriter, speed);
            }
            else{
                rep(w);
                w.addListener(rep);
            }
        }
        function rep(w) {
            if (w.matches) {
                setTimeout(function(){
                    i = 0;
                    speed = 50; 
                    document.getElementById("text").innerHTML = '';
                    setTimeout(typeWriter, speed);
                }, 5000);
            }
        }
    </script>
</body>
</html>

What does it mean "not working"? First of all, add js code to start your js, after page loads. https://stackoverflow.com/questions/9899372/pure-javascript-equivalent-of-jquerys-ready-how-to-call-a-function-when-t — Kamil Naja, Aug 19 '18 at 10:33
I think onload doesn't work because the script is after the element. — enf0rcer, Aug 19 '18 at 10:43
Yes. Thanks but now my rep() function is not working properly. — vishal mehra, Aug 19 '18 at 10:46

Kamil Naja · Answer 1 · 2018-08-19T10:44:59.713

0

You forget start typeWriter() function. On the last line of JS code, add

typeWriter();

and this start works. This is better way to start code, than adding onload. Alternatively, you can add onload on body element.

https://codepen.io/KamilNaja/pen/rZBwge?editors=1010

edited Aug 19 '18 at 10:44

answered Aug 19 '18 at 10:40

Kamil Naja

4,390
4
25
38

Thanks. Now it works but i don't want this typing effect in the screen size less than 768px and for that i created rep() function and its not working. – vishal mehra Aug 19 '18 at 10:44
You don't want this repeated typing on small screen, yes? If this is true, your code works properly. Change screen size and reload app - after this, typing effect appears only once. – Kamil Naja Aug 19 '18 at 10:48
It works fine in your codepen code but when i use it on my own code it doesn't works. – vishal mehra Aug 19 '18 at 11:08
Try ctrl + f5, or test this on different browser. This should work. – Kamil Naja Aug 21 '18 at 08:59

score 0 · Answer 2 · answered Aug 19 '18 at 10:57

onload is not applicable on flowing element. As stated in W3, only the following elements work.

<body>, <frame>, <iframe>, <img>, <input type="image">, <link>, <script>, <style>

By the way you should no longer use onload in html. It is not a good habit for mixing HTML and javascript. Sometimes, there is already existing a window.onload function in a webpage and overwrite your onload (This is usual.)

Thus,

var i = 0;
var w = window.matchMedia("(min-width: 768px)");
var txt = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ';
var speed = 50;
function typeWriter() {
    if (i < txt.length) {
        document.getElementById("text").innerHTML += txt.charAt(i);
        i++;
        setTimeout(typeWriter, speed);
    }
    else{
        rep(w);
        w.addListener(rep);
    }
}
function rep(w) {
    if (w.matches) {
        setTimeout(function(){
            i = 0;
            speed = 50; 
            document.getElementById("text").innerHTML = '';
            setTimeout(typeWriter, speed);
        }, 5000);
    }
}
var x = document.getElementById("about");
x.addEventListener("load", typeWriter); //This is not working as div has no sign of loading

window.addEventListener("load", typeWriter); //But window has. Try comment this, it will no longer work.)

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <style type="text/css">
        .about p{
            color: #000;
            font-size: 22px;
        }
    </style>
</head>
<body>
    <div id="about">
        <p id="text"></p>
    </div>
</body>

Typing effect using javascript not working

2 Answers2