0

Eu tenho uma função em Javascript que mostra um texto em um elemento com um efeito "maquina de escrever", porém queria fazer que este texto venha dentro de uma tag P (Para quebra de linha). Alguém poderia me ajudar? Desde já agradeço.

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);
}
2
  • Mas qual é a dúvida exatamente? Você quer colocar quebras de linha no parágrafo e não sabe como? 23/10/2018 às 13:52
  • A função mostra um texto com efeito em algum seletor, porem a função só lança o texto puro sem nada. Eu queria que vinhe-se dentro de uma tag P
    – Takenomy
    23/10/2018 às 13:56

2 Respostas 2

1

Na verdade o <p> é para parágrafos, o <br>seria para quebras de linha. Mas enfim, vamos ao seu código:

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);
}

Coloquei ali na linha 6 as duas tags <br><p> onde ele vai quebrar e dar um parágrafo, mas você pode analisar o que será melhor. E outra, ele está fazendo isso antes de imprimir o caractere, se quiser que seja feita a impressão após faça a inversão:

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

2
  • Deste modelo fica letra por letra em cada linha, assim, eu queria colocar um trecho em cada linha.
    – Takenomy
    23/10/2018 às 15:09
  • Então peço que reescreva sua pergunta explicando sua necessidade e colocando o máximo de código possível pra podermos te ajudar. 23/10/2018 às 16:36
0

Uma maneira rápida e nem de longe a melhor seria fazendo isso:

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>

2
  • Oppaa amigo, deu certinho!
    – Takenomy
    27/10/2018 às 14:12
  • Muiiiiito obrigado
    – Takenomy
    27/10/2018 às 14:12

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .