How to do (javascript typewriter effect)? Step by step

Answer 1

You need to apply following knowledges:

- getting DOM elements
- setInterval() and clearInterval()
- for loop
- length property

Open a blank web code and tag me in there. I'll teach you step by step

Answer 2

This is an interesting and easy thing to do with js.
Here are the steps.

1.Store the text that to be in the typing effect in a variable.
var txt = "Cat ipsum dolor sit amet..."

2.Make an element in html to display the characters.
var elem = document.createElement("p");
document.appendChild(elem);

3.Loop through each character in the string.
for(let c of txt.split("")) {...}

4. Print each element at a specific time period inside the loop.

for... {
setTimeout(()=> {
elem.innerHTML += c;
},500) //types every 0.5sec.
}

And then enjoy the effect

EDIT: Above version is not working for some reasons. Try this instead.

var txt = "12345";
var i=0;
window.onload = () => {
let interval = setInterval(()=>{
document.querySelector("p").innerHTML += txt.charAt(i++);
if(i==txt.length) {clearInterval(interval)}
},500);

}

Answer 3

Gordon I checked it and its not working. Thanks for letting me know.

Answer 4

Gordon nope why? is there any error?

Answer 5

The timeout time, if for every character, it's the same (500ms),what would happen?

Answer 6

Dear friend I have 2 easy options for you

1. Use Typed.js JavaScript Library

https://mattboldt.com/demos/typed-js/

2. Or follow this link to do it yourself.
https://youtu.be/POX3dT-pB4E

I hope this helps.

Answer 7

Thank you

Answer 8

Seniru Pasan Have you tried your point 4 in code playground?

Answer 9

Another resource:

https://css-tricks.com/snippets/css/typewriter-effect/

Three of the seven examples in the link were able to simulate the effect with just HTML and CSS. The remaining four use JavaScript.

Answer 10

Also, please see prior post:

https://www.sololearn.com/Discuss/479514/?ref=app

Many good examples and explanations there too.