Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

JavaScript Problem with typewriter javascript function

M

Maja0802

Well-Known Coder
Hey there!

I am trying to make a typewriter function in Javascript, where it writes some text, deletes it and writes another text. Unfortunately is it not working....Any ideas what might have gone wrong?

(I have been trying to recreate this: https://safi.me.uk/typewriterjs/)

Also any of you guys who know, how I make this post into a question?


[CODE lang="html" title="HTML"]<!DOCTYPE html>
<html>
<head>
<script src="styles2.0.js"></script>
<title>hello world</title>
<div id="app"></div>
</head>
<body>
</body>
</html>
[/CODE]

[CODE title="Javascript external"]
var app = document.getElementById('app');

var typewriter = new Typewriter(app, {
loop: true
});

typewriter.typeString('Hello World!')
.pauseFor(2500)
.deleteAll()
.typeString('Strings can be removed')
.pauseFor(2500)
.deleteChars(7)
.typeString('<strong>altered!</strong>')
.pauseFor(2500)
.start();
[/CODE]
 
Last edited:
Sort by date Sort by votes
It is an external library, there is a GitHub project link. After fast skimming, I found this - include <script src="https://unpkg.com/typewriter-effect@latest/dist/core.js"></script> in the header section as following:
HTML: 
<!DOCTYPE html>
<html>
<head>
    <script src="https://unpkg.com/typewriter-effect@latest/dist/core.js"></script>
    <title>hello world</title>
</head>
<body>
    <div id="app"></div>
    <script>
      var app = document.getElementById('app');

      var typewriter = new Typewriter(app, {
        loop: true
      });

      typewriter.typeString('Hello World!')
        .pauseFor(2500)
        .deleteAll()
        .typeString('Strings can be removed')
        .pauseFor(2500)
        .deleteChars(7)
        .typeString('<strong>altered!</strong>')
        .pauseFor(2500)
        .start();
    </script>
</body>
</html>
I tested it on JSFiddle, it should work.
 
Upvote 0 Downvote
ivan.moony said:
It is an external library, there is a GitHub project link. After fast skimming, I found this - include <script src="https://unpkg.com/typewriter-effect@latest/dist/core.js"></script> in the header section as following:
HTML: 
<!DOCTYPE html>
<html>
<head>
    <script src="https://unpkg.com/typewriter-effect@latest/dist/core.js"></script>
    <title>hello world</title>
</head>
<body>
    <div id="app"></div>
    <script>
      var app = document.getElementById('app');

      var typewriter = new Typewriter(app, {
        loop: true
      });

      typewriter.typeString('Hello World!')
        .pauseFor(2500)
        .deleteAll()
        .typeString('Strings can be removed')
        .pauseFor(2500)
        .deleteChars(7)
        .typeString('<strong>altered!</strong>')
        .pauseFor(2500)
        .start();
    </script>
</body>
</html>
I tested it on JSFiddle, it should work.
Click to expand...
Sorry for late reply. Thank you so much. It works for me as well!

I am new to Github (just learning to code). Where did you find <script src="https://unpkg.com/typewriter-effect@latest/dist/core.js"></script>?

Thanks in advance and thanks for the help! 🙂
 
Upvote 0 Downvote
Allright! So you did not find it through the link I posted? Are they to different ways to do the same thing?

Also I attempted to do a Javascript external in the first post I made. I am wondering if I would be able to take everything inside the script <script> var app = document.getElementById('app'); var typewriter = new Typewriter(app, { loop: true }); typewriter.typeString('Hello World!') .pauseFor(2500) .deleteAll() .typeString('Strings can be removed') .pauseFor(2500) .deleteChars(7) .typeString('<strong>altered!</strong>') .pauseFor(2500) .start(); </script> and put into into a external javascript "sheet" (as long as I link it correctly). Does that make sense? 🙂
darioK said:
That is a cdn(Content Delivery Network), google "Typewriter js cdn" and you'll find it.
Click to expand...
 
Upvote 0 Downvote
Also I am currently struggling to style (the text) it in a external css sheet. Normaly I get that right, but I guess I am confused about the classes here.

Would I use: .app { color:green;} .... I cannot seem to make it work...

In my HTML I added a link to my external css style sheet that is named "typewriterdelete(skabelon).css"

[CODE title="HTML"]<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/typewriter-effect@latest/dist/core.js"></script>
<title>hello world</title>
<link rel="stylesheet" href="typewriterdelete(skabelon).css">
</head>
<body>
<div id="app"></div>
<script>
var app = document.getElementById('app');

var typewriter = new Typewriter(app, {
loop: true
});

typewriter.typeString('Hello World!')
.pauseFor(2500)
.deleteAll()
.typeString('Strings can be removed')
.pauseFor(2500)
.deleteChars(7)
.typeString('<strong>altered!</strong>')
.pauseFor(2500)
.start();
</script>
</body>
</html>[/CODE]


Appreciate the help I get... 🙂
 
Upvote 0 Downvote
To link it externaly you need to add the external script after that typewriter cdn

HTML: 
<script src="cdn"></script>
<script src="example.js"></script>

best practice is to put your scripts at the bottom of the body of html.

To style that app you need an id selector (#)
for example:

CSS: 
#app{
    color: green;
}

. is a selector for html class attributes (for example .app, .example, .items etc)
Look up css selectors.
 
Upvote 0 Downvote
darioK said:
To link it externaly you need to add the external script after that typewriter cdn

HTML: 
<script src="cdn"></script>
<script src="example.js"></script>

best practice is to put your scripts at the bottom of the body of html.

To style that app you need an id selector (#)
for example:

CSS: 
#app{
    color: green;
}

. is a selector for html class attributes (for example .app, .example, .items etc)
Look up css selectors.
Click to expand...
You are right. I mixed up id and class! Thanks - css works now.

I cannot seem to make external javascript work, but for now I will just do it inline.

Thanks
 
Upvote 0 Downvote
<script> and </script> tags shouldn't be a part of external js code, they are only necessary within HTML.

If you are about to learn Javascript, there is an important browser button: F12. Among other things, there you can find a console which outputs js errors, if any. Also, you can debug your code from there, performing step-by-step execution.

P.S.
I don't remember how I found the CDN js file, I immediately forgot it, sorry. I guess I followed some links here and there, probably googled a bit, but kill me if I know now exactly how I finally got it.
 
Last edited:
Upvote 0 Downvote

New Threads

Latest posts

Share this page

Buy us a coffee!

DataCamp Advertisement
Code Academy Advertisement

About Us

Code Forum is a community platform where coding enthusiasts can connect with other developers, engage in discussions, ask for help, and share their knowledge with a supportive community. It's a perfect place to improve your coding skills and to find a community of like-minded individuals who share your passion for coding.

Site links

Stay Connected

Back
Top Bottom