Typewriter effect is not working properly

Asked

Viewed 175 times

1

I did a typewriter effect with jquery, and I need that effect to take every paragraph. That way I did it applies the effect only to the first paragraph. Follow code for analysis. Can anyone help me? Thanks in advance.

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Maquina de escrever</title>

    <style>
        body {
            background: #0e1013;
        }
        p{
            max-width: 480px;
            text-align: center;
            margin: 68px auto;
            color: #fff;

        }
    </style>


</head>
<body>
<p>Texto1 - typewriter</p>
<p>Texto1</p>
<p>Texto1</p>



    <script>



    function typeWriter(elemento) {
        const textoArray = elemento.innerHTML.split('');
        elemento.innerHTML = '';
        console.log(textoArray);
        textoArray.forEach((letra, i)=> {
            setTimeout(() => {
                elemento.innerHTML += letra
            }, 95*i)
        });
    }


        const titulo = document.querySelector('p');
        typeWriter(titulo);
    </script>
</body>
</html>
javascript jquery

  • This code is not jQuery.

  • sam, sorry I had jquery in my head at the time of writing the question, I didn’t even realize.

  • If you have used jQuery, I can put a suggestion in this format.

3 answers

3

The problem is that you are using the function querySelector and, how it is possible to see in the documentation, it returns only the first element found. To fix this you need to change to querySelectorAll and convert it to an array and then iterate over each paragraph. Follows code example:

function typeWriter(elemento) {
    const textoArray = elemento.innerHTML.split('');
    elemento.innerHTML = '';
    textoArray.forEach((letra, i)=> {
        setTimeout(() => {
            elemento.innerHTML += letra
        }, 95*i)
    });
}


const titulo = document.querySelectorAll('p');
Array.from(titulo).forEach(typeWriter);
<html lang="en">
    <body>
        <p>Texto1 - typewriter</p>
        <p>Texto2</p>
        <p>Texto3</p>
    </body>
</html>

3

You have to take all the p, for that you can use the querySelectorAll and then make a forEach

function typeWriter(elemento) {
    const textoArray = elemento.innerHTML.split('');
    elemento.innerHTML = '';
    textoArray.forEach((letra, i) => {
        setTimeout(() => {
            elemento.innerHTML += letra
        }, 95 * i)
    });
}

let p = document.querySelectorAll('p')

p.forEach((e) => {
    typeWriter(e)
})
body {
    background: #0e1013;
}

p {
    max-width: 480px;
    text-align: center;
    margin: 68px auto;
    color: #fff;

}
<p>Texto1 - typewriter</p>
<p>Texto1</p>
<p>Texto1</p>

-1

Follow a simple code below in pure JS (super simple)!

I put a step by step on the following link: https://www.rodrigobrito.dev.br/blog/js-e01-efeito-maquina-de-escrever-com-javascript

//EFEITO MÁQUINA DE ESCREVER

function typeWrite(e) {
    const textoArray = e.innerHTML.split('');
    e.innerHTML = ' ';
    textoArray.forEach(function (letter, i) {
        setTimeout(function () {
            e.innerHTML += letter;
        }, 80 * i);
    });
}

const phrase = document.querySelector('.headline');

typeWrite(phrase);
.headline:after{
     content: '|';
    margin-left: 5px;
    opacity: 1;
    animation: flash .7s infinite;
}

@keyframes flash{
    0%, 100%{
        opacity: 1;
    }
    50%{
        opacity: 0;
    }
}
<p class="headline">Efeito máquina de escrever</p>

Browser other questions tagged javascript jquery

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