animate text as writing in loop

Question

Check the code bellow. Here i am trying to animate a text which will be iterate over and over again without click button. First part of code works on click button but second part not works where i removed function and added it in jquery ready() method. It should be work on document ready but its not working. Whats wrong i am doing here?

This is what working now on click button:

<h1>Typewriter</h1>

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

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

<script>
var i = 0;
var txt = 'Lorem ipsum dummy text blabla.';
var speed = 50;

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

This is what i tried already:

    <span id="demo"></span>

$(document).ready(function () {
        typeWriter();
        //writing effect
        var i = 0;
        var txt = 'Lorem ipsum dummy text blabla.';
        var speed = 50;
        function typeWriter() {
            if (i < txt.length) {
                document.getElementById("demo").innerHTML += txt.charAt(i);
                i++;
                setTimeout(typeWriter, speed);
            }
        }

        });

In your second block `typeWriter` is not defined. Please edit your second code block to show the whole file, like you do in the first code block. That will make it more clear — Reed Spool, Jul 24 '20 at 04:12
Does this answer your question? [Loop CSS typewriter effect and change text](https://stackoverflow.com/questions/42822040/loop-css-typewriter-effect-and-change-text) — kmoser, Jul 24 '20 at 04:19
@kmoser no your reference is not same effect as it does. this one more simple — Mr John, Jul 24 '20 at 04:22
you are calling your function `typeWriter();` before `txt` is intialize you can check you might be getting error `length` is not defined for `txt`.Instead call that function after `var speed = 50; //call typeWriter();` it should work . — Swati, Jul 24 '20 at 04:24
1. Why do you need `$(document).ready()`? This is `jquery`. 2. `typeWriter()` should be placed after logic when. — s.kuznetsov, Jul 24 '20 at 04:27

score 1 · Accepted Answer · answered Jul 24 '20 at 04:28

1

If i call typeWriter() function after just its defined then it works for me.

$(document).ready(function () {
    var i = 0;
            var txt = 'Lorem ipsum dummy text blabla.';
            var speed = 100;
            function typeWriter() {
                if (i < txt.length) {
                    document.getElementById("secondLineTxt").innerHTML += txt.charAt(i);
                    i++;
                    setTimeout(typeWriter, speed);
                }
            }
            typeWriter();

});

answered Jul 24 '20 at 04:28

Liakat Hossain

1,288
1
13
24

Please debug your browser console. Maybe some hints? – Liakat Hossain Jul 24 '20 at 04:31
my bad. i was not checking browser console – Mr John Jul 24 '20 at 12:39

score 1 · Answer 2 · answered Jul 24 '20 at 04:32

$(document).ready(function () {

//writing effect
        var i = 0;
        var txt = 'Lorem ipsum dummy text blabla.';
        var speed = 50;
        function typeWriter() {
            if (i < txt.length) {
                document.getElementById("demo").innerHTML += txt.charAt(i);
                i++;
                setTimeout(typeWriter, speed);
            }
}

        typeWriter();

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Typewriter</h1>
<button>Click me</button>
<p id="demo"></p>

animate text as writing in loop

2 Answers2