JS Typewriter twice on page with different string not working

46 Views Asked by At

I have on 2 different pages of my website a typewriter effect, once with a string in spanish, another location string in english. But I cannot get this to work.

My HTML in one part is the following, this works.

<div class="container">    
    <div id="typewriter"></div>                    
</div>    

The 2nd part where it isnt working is

<div class="container">
    <div id="english-typewriter" class="medium-text serif"></div>                    
</div> 

The JS is the following

const spanishInstance = new Typewriter('#typewriter', {
  strings: ['hoteles', 'restaurantes'],
  autoStart: true,
  loop: true,
});

const englishInstance = new Typewriter('#english-typewriter', {
  strings: ['hotels', 'restaurants'],
  autoStart: true,
  loop: true,
});

How can I get the English part to work as well?

Source is:

Error showing on the console is

jquery.min.js:2 Uncaught Error: Could not find container element at new n (core.js:1:12009) at HTMLDocument. (scripts.js:50:25) at e (jquery.min.js:2:30158) at t (jquery.min.js:2:30460)

The working part of the JS is only this section

const spanishInstance = new Typewriter('#typewriter', {
  strings: ['hoteles', 'restaurantes', 'agencias de viaje', 'guía de turistas', 'resorts', 'tour operadores', 'eventos', 'hostales', 'cafés', 'y muchos más'],
  autoStart: true,
  loop: true,
});
1

There are 1 best solutions below

0
mplungjan On BEST ANSWER

Assuming https://github.com/tameemsafi/typewriterjs

Here is how, using the jsfiddle the author made us

const appES = document.getElementById('appES');
const appEN = document.getElementById('appEN');

const typewriter1 = new Typewriter(appES, {
  loop: true,
  delay: 75,
});

typewriter1
  .pauseFor(1000)
  .typeString('Hoteles')
  .pauseFor(300)
  .deleteChars(10)
  .typeString('Restaurantes <span style="color: #27ae60;">muy</span> interesantes')
  .pauseFor(1000)
  .start();

const typewriter2 = new Typewriter(appEN, {
  loop: true,
  delay: 75,
});

  typewriter2
  .pauseFor(1000)
  .typeString('Hotels')
  .pauseFor(300)
  .deleteChars(10)
  .typeString('<span style="color: #27ae60;">VERY</span> interesting restaurants')
  .pauseFor(1000)
  .start();
@import url('https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap');

.app {
  font-size: 70px;
  line-height: 78px;
  font-weight: 400;
  font-family: 'Roboto', sans-serif;
}

strong {
  font-weight: 700;
}
<script src="https://unpkg.com/[email protected]/dist/core.js"></script>

<div id="appES" class="app"></div>
<div id="appEN" class="app"></div>