typed.js funktioniert nicht

Kickflip

Hi,

ich verzweifle, weil typed.js einfach einen Text nicht animiert tippt und ich nicht verstehe warum.

Code

<body>

    <div id="typed-strings">
        <p>Typed.js is a <strong>JavaScript</strong> library.</p>
        <p>It <em>types</em> out sentences.</p>
    </div>
    <span id="typed"></span>

    <script type="text/javascript" src="{{url_for('static', filename='jquery.js') }}"></script>
    <script type="text/javascript" src="{{url_for('static', filename='typed.js') }}"></script>
    <script src="https://kit.fontawesome.com/xxxxx.js"></script>
    <script type=text/javascript src="{{url_for('static', filename='javascript.js')}}"></script>
    <script>
        var typed = new Typed('.typed', {
          stringsElement: '.typed-strings'
        });
    </script>

</body>

Alles anzeigen

javascript.js:

Code

$(document).ready(function(){

      $('#icon').click(function(){
           $('ul').toggleClass('show');
           $("i", this).toggleClass("fas fa-times fas fa-bar");
      });
});

Die javascript.js funktioniert.

Warum wird der Text nicht animiert? Hat das was mit jQuery zu tun? Der Text wird angezeigt, aber es wird nichts animiert...

LG und Danke

Sempervivum

Der erste Parameter von Typed ist ein Selektor, denn er wird mit document.querySelector(elementId) ausgewertet. Wenn da steht '.typed' muss es eine Klasse sein, in deinem Fall hast Du im HTML aber eine ID. Versuche ob es so funktioniert:

Code

var typed = new Typed('#typed', {

Kickflip

Danke für deine Antwort. Leider funktioniert das auch nicht. Es wird mir einfach nur der Volltext angezeigt.

Typed.js habe ich heruntergeladen und die typed.js im Ordner src in den Ordner "static" gepackt. Ich bin echt am verzweifeln...

Sempervivum

Ich hatte übersehen, dass das gleiche auch für den Parameter stringsElement gilt. Und damit nicht sehr schnell geschrieben wird, musst Du zusätzlich den Parameter typeSpeed verwenden.

Dieses Javascript funktioniert mit deinem HTML:

Code

    <script>
        var typed = new Typed('#typed', {
            stringsElement: '#typed-strings',
            typeSpeed: 40
        });
    </script>

Kickflip

Bei mir funktioniert es aber nicht. Das ist sehr merkwürdig. Teste es in Safari.

Sempervivum

Sieh mal in die Console, ob Du Hinweise findest, z. B. ob es Probleme beim Laden von typed.js gibt.

Kickflip

Tatsächlich.

Da sind ein Fehler mit der typed.js

Zitat

[Error] SyntaxError: Unexpected token '{'. import call expects exactly one argument.

(anonyme Funktion) (typed.js:1)

--> genauer im typed.js direkt in Zeile 1: import { initializer } from

und demnach findet er Typed nicht im js:

Zitat

[Error] ReferenceError: Can't find variable: Typed

Globaler Code (127.0.0.1:41)

Kann damit jemand etwas anfangen?

Sempervivum

Prüfe, ob Du das richtige typed.js hast. Du kannst es auch zunächst mit dem typed.js aus dem CDN versuchen, wie bei Github angegeben:

Code

<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.11"></script>

Kickflip

Zitat von Sempervivum
Prüfe, ob Du das richtige typed.js hast. Du kannst es auch zunächst mit dem typed.js aus dem CDN versuchen, wie bei Github angegeben:
Code
<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.11"></script>

Das funktioniert bei mir! Danke.

Jetzt mitmachen!