CODEWITHSUNDEEP
javascript
Anakin
Anakin

Reputation: 1291

How to make a simple typewriter with pure javascript?

I know I could do it with jQuery, but I want to use only javascript.

I am currently using this code (demo)

<body onload="typeEffect();">
 <span id="typeArea"></span>
 <script>
  var textSpan = document.getElementById("typeArea");
  var letterPrint = 0;

  function effectOne()
  {
   textSpan.innerHTML = "H";
  }

  function effectTwo()
  {
   textSpan.innerHTML = "He";
  }

  function effectThree()
  {
   textSpan.innerHTML = "Hel";
  }

  function effectFour()
  {
   textSpan.innerHTML = "Hell";
  }

  function effectFive()
  {
   textSpan.innerHTML = "Hello";
  }
 </script>
</body>

But the result doesn't be like I wanted, it doesn't type each letter but it type a word simultaneously.

I have also tried this javascript code

var letterPrint =  0;

function playEffect()
{
 if (letterPrint == 0)
 {
  textSpan.innerHTML = "H";
  var letterPrint = 1;
 }
 else if (letterPrint == 1)
 {
  textSpan.innerHTML = "He";
  var letterPrint = 2;
 }
 else if (letterPrint == 2)
 {
  textSpan.innerHTML = "Hel";
  var letterPrint = 3;
 }
 else if (letterPrint == 3)
 {
  textSpan.innerHTML = "Hell";
  var letterPrint = 4;
 }
 else if (letterPrint == 4)
 {
  textSpan.innerHTML = "Hello";
  var letterPrint = 5;
 }
 else
 { 
  textSpan.innerHTML = "Hello";
 }
}

setInterval("playEffect()","1000");

But it gives me the same result.

How can I make typewriter effect with javascript? Or it is impossible?

Upvotes: 1

Views: 1196

Answers (4)

sifriday
sifriday

Reputation: 4472

Here's something to get you started. I've used recursion to save you having to manually type your big if/else and it shows you how to do the timeouts, too.

var message = "Hello World"

function printChar(i) {
    var output = document.getElementById("output")
    var char = message.charAt(i);
    output.innerHTML = output.innerHTML + char;
    if (i < message.length) {
        window.setTimeout(function() {
            i = i + 1;
            printChar(i);
        }, 1000)
    }
}

printChar(0);

Demo here:

http://jsfiddle.net/4c6msk8L/

Short version, out of interest (see comments):

var m = "Hello World"
function p(i) {
    document.getElementById("output").innerHTML += m.charAt(i);
    if (i<m.length) {window.setTimeout(function() {p(++i);}, 100)}
}
p(0);

Upvotes: 2

nicael
nicael

Reputation: 18995

Here you go (considering you have, for example, span or div with id "tr"):

var word = "Hello, world!";
var i = 0;
var timer = setInterval(function(){
    document.getElementById("tr").innerHTML+=word[i];i++;if(i>word.length-1){clearInterval(timer)}
},100)

fiddle

Upvotes: 2

Amit Joki
Amit Joki

Reputation: 59252

You can also split the message into each characters and then use setTimeout with an increasing timeout in a Array.forEach callback.

function type(message, id) {
    var output = document.getElementById(id), i = 0;
    message.split("").forEach(function(letter){
        setTimeout(function(){
           output.innerHTML += letter;
        }, i++ * 1000);
    });
}
type("Hello Word", "output");

DEMO

Upvotes: 2

Has QUIT--Anony-Mousse
Has QUIT--Anony-Mousse

Reputation: 77454

Pay attention to var, which creates a local variable (hiding a variable with the same name in the outer scope).

Consider using substring instead of copy&pasting the same code. Now you have the same error in 5 places to fix.

Upvotes: 0

Related Questions