Javascript Não consigo usar typed.js

Lucas C · 28 de fevereiro de 2021

Eu sei que é fácil de usar, mas por algum motivo eu não consigo. Esses erros aparecem quando eu inspeciono:

Código:

<!DOCTYPE html>

<html lang="pt-br">

    <head>

        <meta charset="utf-8" />

        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

        <meta name="description" content="" />

        <meta name="author" content="" />

        <title>Lucas C.</title>

        <!-- Favicon-->

        <link rel="icon" href="\static\img\favicon.jpg" />

        <!-- Font Awesome icons (free version)-->

        <script src="https://use.fontawesome.com/releases/v5.15.1/js/all.js" crossorigin="anonymous"></script>

        <!-- Google fonts-->

        <link href="https://fonts.googleapis.com/css?family=Merriweather+Sans:400,700" rel="stylesheet" />

        <link href="https://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic" rel="stylesheet" type="text/css" />

        <!-- Third party plugin CSS-->

        <link href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css" rel="stylesheet" />

        <!-- Core theme CSS (includes Bootstrap)-->

        <link href="<?php \Core\Utils\Dir::staticDir('css/styles.css') ?>" rel="stylesheet" />

    </head>

    <body id="page-top">

        <!-- Navigation-->

        <nav class="navbar navbar-expand-lg navbar-light fixed-top py-3" id="mainNav">

            <div class="container">

                <a class="navbar-brand js-scroll-trigger" href="#page-top">Lucas Cechinel</a>

                <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">

                    <span class="navbar-toggler-icon"></span>

                </button>

                <div class="collapse navbar-collapse" id="navbarResponsive">

                    <ul class="navbar-nav ml-auto my-2 my-lg-0">

                        <li class="nav-item">

                            <a class="nav-link js-scroll-trigger" href="/">Início</a>

                        </li>

                        <li class="nav-item">

                            <a class="nav-link js-scroll-trigger" href="/textos">Textos</a>

                        </li>

                        <li class="nav-item">

                            <a class="nav-link js-scroll-trigger" href="#contact">Sugestões</a>

                        </li>

                    </ul>

                </div>

            </div>

        </nav>

        <!-- Masthead-->

        <header class="masthead">

            <div class="container h-100">

                <div class="row h-100 align-items-center justify-content-center text-center">

                    <div class="col-lg-10 align-self-end">

                        <h1 class="text-white font-weight-bold">Lucas Cechinel</h1>

                        <hr class="divider my-4" />

                    </div>

                    <div id="typed-strings" class="align-self-baseline">

                        <p class="text-white-75 font-weight-light mb-5 h3">Estudante</p>

                        <p class="text-white-75 font-weight-light mb-5 h3">Programador</p>

                    </div>

                    <span id="typed"></span>

                </div>

            </div>

        </header>       

        <section>

            ..........

        </section>



        <!-- Contact-->

        <section class="page-section bg-custom" id="contact">

            <div class="container">

                <div class="row justify-content-center">

                    <div class="col-lg-8 text-center">

                        <h2 class="mt-0">Sugestões?</h2>

                        <hr class="divider my-4" />

                        <p class="text-muted mb-5">Envie suas sugestões para o email abaixo!</p>

                    </div>

                </div>

                <div class="row">

                    <div class="col-lg-12 mr-auto text-center">

                        <i class="faz fa-envelope fa-3x mb-3 text-muted"></i>

                        <!-- Make sure to change the email address in BOTH the anchor text and the link target below!-->

                        <a class="d-block text-decoration-none" href="mailto:[email protected]">lucascechinel9@gmail.com</a>

                    </div>

                </div>

            </div>

        </section>

        <!-- Footer-->

        <footer class="bg-light py-5">

            <div class="container">

                <div class="small text-center text-muted">Copyright © 2021 - Lucas Cechinel da Silveira</div>

            </div>

        </footer>

        <!-- Bootstrap core JS-->

        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>

        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

        <!-- Third party plugin JS-->

        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>

        <!-- Core theme JS-->

        <script src="<?php \Core\Utils\Dir::staticDir('js/scripts.js') ?>"></script>

            

        <script src="<?php \Core\Utils\Dir::staticDir('js/typed.js') ?>"></script>

        <script>

            $('document').ready(function(){

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

                    stringsElement: '#typed-strings',

                    backSpeed: 40,

                    typeSpeed: 40

                })

            });

        </script>

    </body>

</html>

Rui Guilherme · 2 de março de 2021

Acredito que se você usar uma CDN resolva seu problema:

troque

<script src="<?php \Core\Utils\Dir::staticDir('js/typed.js') ?>"></script> para <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>