Uncaught ReferenceError: Typewriter is not defined

Question

I have added a script for a typewriting feature I want to add on the banner of my website but for some reason on jsfiddle.net it works perfectly fine but when published it doesn't work.

On opening the console on Chrome I get the following error:

Uncaught ReferenceError: Typewriter is not defined

<script>
var app = document.getElementById('notificationBar');
var typewriter = new Typewriter(app, {
    loop: true,
    cursor: "",
});
typewriter.typeString('MESSAGE1')
    .pauseFor(2500)
    .deleteAll()
    .typeString('MESSAGE2')
    .pauseFor(2500)
    .deleteAll()
    .typeString('MESSAGE3')
    .pauseFor(2500)
    .start();
</script>

Not really sure what I should do to fix this as I am just getting used to Javascript and this is my first script project. Any suggestions would help ;)

Answer 1

I've looked around and found the script you need to use:

<script src="https://unpkg.com/[email protected]/dist/core.js"></script>

var app = document.getElementById('notificationBar');
var typewriter = new Typewriter(app, {
    loop: true,
    cursor: "",
});
typewriter.typeString('MESSAGE1')
    .pauseFor(2500)
    .deleteAll()
    .typeString('MESSAGE2')
    .pauseFor(2500)
    .deleteAll()
    .typeString('MESSAGE3')
    .pauseFor(2500)
    .start();

<script src="https://unpkg.com/[email protected]/dist/core.js"></script>
<div id="notificationBar"></div>