JavaScript - Insertar JS in HTML

Insertar JS in HTML

Publicado por Lauta (1 intervención) el 06/09/2022 05:56:22

Hola gente, soy nuevo en esto de la programacion y no estoy pudiendo aplicar un efecto a un proyecto personal que estoy armando

El efecto en si, seria el de maquina de escribir, mediante el metodo que encontre en el link a continuacion

https://safi.me.uk/typewriterjs/

igual detallo lo que me pasa

En el HTML ingreso lo siguiente

<div id="app"></div>

y en JS lo siguiente

var app = document.getElementById('app');

var typewriter = new Typewriter(app, {

    loop: true

});

typewriter.typeString('Hello World!')

    .pauseFor(2500)

    .deleteAll()

    .typeString('Strings can be removed')

    .pauseFor(2500)

    .deleteChars(7)

    .typeString('<strong>altered!</strong>')

    .pauseFor(2500)

    .start();

Y aun asi no funciona, directamente no aparce nada, me estoy olvidando de llamarlo de alguna manera?

Valora esta pregunta

Me gusta: Está pregunta es útil y esta clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

Insertar JS in HTML

Publicado por Ivan (118 intervenciones) el 06/09/2022 11:45:51

Hola,

este script tiene el problema que llama al elemento <div id="app"></div> antes de ser definido y por tanto devuelve un elemento vacío.

Si pones el script al final de la página funciona correctamente.

<!DOCTYPE html>

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">

  <script src="https://unpkg.com/typewriter-effect@2.3.1/dist/core.js"></script>

</head>

<body>

  <h1>TypeWriter app</h1>

  <p>Ejemplo de efecto máquina de escribir con JavaScript</p>

  <div id="app"></div>

  <script>

    var app = document.getElementById('app');

    var typewriter = new Typewriter(app, {

        loop: true

});

    typewriter.typeString('Hello World!')

        .pauseFor(2500)

        .deleteAll()

        .typeString('Strings can be removed')

        .pauseFor(2500)

        .deleteChars(7)

        .typeString('<strong>altered!</strong>')

        .pauseFor(2500)

        .start();

  </script>

</body>

</html>

Un saludo!

Valora esta respuesta

Me gusta: Está respuesta es útil y esta clara

No me gusta: Está respuesta no esta clara o no es útil

Comentar