HELP! How do I create a type-writer effect?

Question

I want to have the string, "Thanks for visiting our website!" appear letter by letter to create a type-writer effect. I tried to build my own code for this effect, but it didn't work out. (I'm a beginner in JavaScript)

window.onload () {

document.getElementById("typing").style.visibility = "hidden";
let x = 1
function typing() {
for (x < 31) {
document.getElementById("typing").charAt(x).style.visibility = "visible"
x++;
setTimeout(typing(), 100)
}

}

Can someone tell me how to fix my code? Is my syntax or logic wrong?

Thanks in advance!

Answer 1

tori the crafter 💛
I think you can't set visibility of individual letters (as they are not elements?)

Try this:
1. Store the element's textContent
---------
var str = typeDiv.textContent
---------

2. Setting the textContent of the element to an empty string
---------
typeDiv.textContent = ''
---------

3. In a function continuously add letter by letter to the element like this.
---------
typeDiv.textContent += ste.charAt(index);
---------

(I used textContent instead of innerHTML as the former is said to be faster than latter)

Here is a working example.
https://code.sololearn.com/WhlM0J3HKktc/?ref=app

Answer 2

tori the crafter 💛
Happy to help.!👍

Answer 3

Hanuma Ukkadapu Oh ok, thank you so much for explaining how to do it!