CODEWITHSUNDEEP
javascripthtml
Kotaka Danski
Kotaka Danski

Reputation: 600

Typewriter effect in Javascript not working

I looked at a few examples on how to make a typewriter effect but my solution doesn't seem to work.I have three sentences that I want to loop forever and have them typed letter by letter to get that typewriter effect. Here is my code:

<html>
    <head>
        <meta charset="utf-8">		
		    <title>Кухнята на Дани</title>			
        <link rel="stylesheet" href="css.css">        
        <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.js"></script> <!--required for the next script-->
        <!--some other javascript that requires the JQuery code above-->
        <script type="text/javascript">
        function typeWriter(){
            var flag=0;
            while(flag=0)
                  {
                    var s1 = "sentence1";
                    var s2 = "sentence2";
                    var s3 = "sentence3";
                    var s = "";
                    var i = 0;
                    document.getElementById("sub-element").innerHTML=s;
                    for(i=0; i<s1.length; i++)
                        {
                            s=s1.charAt(i);
                            document.getElementById("sub-element").innerHTML = document.getElementById("sub-element").innerHTML+s;
                            setTimeout(typeWriter, 50);
                        }
                    s="";
                    document.getElementById("sub-element").innerHTML=s;
                    for(i=0; i<s2.length;i++)
                        {
                            s=s2.charAt(i);
                            document.getElementById("sub-element").innerHTML = document.getElementById("sub-element").innerHTML+s;
                            setTimeout(typeWriter, 50);
                        }
                    s="";
                    document.getElementById("sub-element").innerHTML=s;
                    for(i=0; i<s3.length;i++)
                        {
                            s=s3.charAt(i);
                            document.getElementById("sub-element").innerHTML = document.getElementById("sub-element").innerHTML+s;
                            setTimeout(typeWriter, 50);
                        }
                    s="";                        
                  } 
        }
        </script>
    </head>
    <body onload = "typeWriter()">
      <header>        
      <!--header and navigation stuff here-->
      </header>             
        <section id="home">
    	    <div class="container">   					
    			<h1>Кухнята на Дани</h1>
                <p id="sub-element"></p> <!--the text will appear in this paragraph-->                  				
    	    </div>
    	</section>
    </body>
</html>

Due to some reason, the Javascript code won't work. Excuse me for my code. I know it's too long but I decided to include everything that might be important.

Upvotes: 0

Views: 976

Answers (2)

MeetuU
MeetuU

Reputation: 306

Try this

 <section id="home">
            <div class="container">                     
                <h1>Кухнята на Дани</h1>
                <p id="newmsg"></p> <!--the text will appear in this paragraph-->                               
            </div>
        </section>

Javascript code

var im = 0, ij=0;
    var txtarray = ['sentence1', 'sentence2', 'sentence3'];
    var speed = 100;

    function typeWriter() {
      if (im < txtarray[ij].length) {
        document.getElementById("newmsg").innerHTML += txtarray[ij].charAt(im);
        im++;
        setTimeout(typeWriter, speed);
      }
      else{
        setTimeout(repeatt, 1000);
      }
    }
     typeWriter();

    function repeatt() {
        document.getElementById("newmsg").innerHTML = "";
        im=0;
        if(ij < txtarray.length-1){
            ij++;
        }
        else{
            ij = 0;
        }
        typeWriter();
    }

Upvotes: 0

Lior Hai
Lior Hai

Reputation: 487

You are using a while loop, meaning that even though you are appending one letter at a time it happens too fast (and in the same render frame) and thus you dont see the type effect.

You need to execute the function on some time interval, for example

setInterval(appendLetter, 200)

Which will execute appendLetter function every 200 ms and there you can have your chars append logic.

const text = "some text to loop"
let charIndex = 0;

function appendLetter() {
    document.getElementById("aaa").innerHTML = text.substr(0, charIndex)
    charIndex++;
    if(charIndex > text.length) charIndex = 0;
}

setInterval(appendLetter, 250);

Upvotes: 1

Related Questions