I have a Javascript function that shows a text in an element with a "typewriter" effect, however I wanted to make this text come within a P (For line break) tag. can anybody help me? Thanks in advance.
function EE(texto,ClassElemento,tempo){
var char = texto.split('').reverse();
var typer = setInterval(function () {
if (!char.length) return clearInterval(typer);
var next = char.pop();
document.querySelector(ClassElemento).innerHTML += next;
}, tempo);
}
A quick and by no means the best way would be to do this:
function EE(texto,ClassElemento,tempo){
var char = texto.split('').reverse();
document.querySelector(ClassElemento).innerHTML = '<p></p>'
var typer = setInterval(function () {
if (!char.length) return clearInterval(typer);
var next = char.pop();
document.querySelector(ClassElemento).firstChild.innerHTML += next;
}, tempo);
}
EE('Foo is not bar!', '.foo', 1000)<div class="foo"></div>In fact% w / o% is for paragraphs,% w / o% would be for line breaks. But anyway, let's go to your code:
function EE(texto,ClassElemento,tempo){
var char = texto.split('').reverse();
var typer = setInterval(function () {
if (!char.length) return clearInterval(typer);
var next = char.pop();
document.querySelector(ClassElemento).innerHTML += '<br><p>' + next;
}, tempo);
} I placed in the <p> the two <br> tags where it will break and give a paragraph, but you can analyze what will be best. And another, it is doing this before printing the character, if you want the impression to be made after the inversion:
document.querySelector(ClassElemento).innerHTML += next + '<br><p>';