Line break in a function

Asked

Viewed 83 times

0

I have a Javascript function that shows a text in an element with a "typewriter" effect, but I wanted to make this text come within a P tag (for line breaking). Could someone 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);
}
javascript

  • But what is the question exactly? You want to put line breaks in the paragraph and don’t know how?

  • The function shows a text with effect on some selector, but the function only launches the plain text with nothing. I wanted it to come inside a tag P

2 answers

1

In fact the <p> is for paragraphs, the <br>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 put it there in the linha 6 the two tags <br><p> where it will break and give a paragraph, but you can analyze what will be best. And another, he’s doing this before printing the character, if he wants the print to be done after the reverse:

document.querySelector(ClassElemento).innerHTML += next + '<br><p>';

  • This template gets letter by letter on each line, so I wanted to put a snippet on each line.

  • So I ask you to rewrite your question by explaining your need and putting as much code as possible so we can help you.

0


A quick way and not by far the best way would be to do it:

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>

  • Oppaa friend, gave it right!

  • Thank you very much

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.