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,
});
Assuming https://github.com/tameemsafi/typewriterjs
Here is how, using the jsfiddle the author made us