How to get Typed.JS to work properly? Using a variable instead of a pure string;

Question

This is my first question on StackOverflow, so I hope I'm including all the necessary. If not, please let me know and I will amend accordingly.

I'm trying to get Typed.JS to work on this Roman numeral converter page. I would like the converted number to render with the "typing" effect, but I can't get it to work. The number does render and I don't see any errors in the console, but the typing effect is missing.

In my script.js file, I have imported Typed and also included it in the HTML (I couldn't understand if only one of them was necessary. The docs don't say much)

import Typed from typed.js;

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

and the function that includes it is as per below. It takes the user input as argument/parameter and displays it on the page.

This is the repo link: https://github.com/Antonio-Riccelli/js-roman-numeral-converter

function outputRomanNumeral(roman) {
    let options = {
    strings: [`${roman}`],
    typeSpeed:90,
    };

    let par = document.getElementById("output");
    par.classList.remove("bg-danger", "text-white", "error-message")
    let typed = new Typed('#spanOutput', options);
    par.classList.add("border-bottom", "border-dark", "border-2");
}

Appreciate any feedback you can provide. Thanks.

sean-7777 · Accepted Answer · 2021-12-31 21:24:01Z

1

Firstly, the way you are importing typed.js is incorrect. You need quotes around it, although that wouldn't actually work either. You are trying to import it when you have the typed.js NPM package installed, but that only works if you have a module bundler such as Webpack.

In your case, there are a couple of things that might work.

Import from CDN. import Typed from "https://cdn.jsdelivr.net/npm/[email protected]";
Use the script tag, the library might use globals.

answered Dec 31, 2021 at 21:24

sean-7777

7125 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

arengit Over a year ago

Hey, thanks for your answer. I've tried doing as you say and imported it only using the CDN. Something happens, but the page goes crazy: it seems to backspace what was already in the InnerText in a loop, rather than typing the new input. See here: postimg.cc/BjqbKZY0

Collectives™ on Stack Overflow

How to get Typed.JS to work properly? Using a variable instead of a pure string;

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related