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.

Answer 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.

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