首页 > 解决方案 > 我的 js 文件没有响应新的编辑

问题描述

我正在更新我构建的 Web 应用程序。我对 HTML 和 CSS 所做的更改会显示在 DOM 上。但是,当我尝试在我的 JS 文件中进行更改时,它们不会显示在 DOM 上。我使用 console.log 对此进行了测试,但它仍然没有显示在 chrome 开发控制台中。我使用导入/导出而不是脚本标签来连接我的 js 文件。如果需要,我很乐意上传我的代码。先感谢您。

这是HTML。我使用 Webpack 来打包代码。它通过“bundle.js”脚本连接。

`
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <link href="https://fonts.googleapis.com/css2?family=Libre+Franklin:wght@300&display=swap" rel="stylesheet" />
        <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Libre+Franklin:wght@300&display=swap" rel="stylesheet" />
        <link rel="stylesheet" href="css/style.css" />
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
        <title>remoteUp</title>
        <link rel="icon" type="image/ico" href="/dist/img/favicon/apple-touch-icon.png" />
        <link rel="preconnect" href="https://fonts.gstatic.com">
        <link href="https://fonts.googleapis.com/css2?family=Abel&display=swap" rel="stylesheet">
    </head>
    <body>
        
        <div class="container">
            <header class="header">
                <img src="/remotetechjobs/dist/img/logo.png">
              <div class="header_text">
              <h1 class="header_name">remoteUp</h1>
              <h2 class="header_subname">work in tech from anywhere</h2>
            </div>
                <form class="search">
                    <input class="search__field" placeholder="Search thousands of jobs ..."  />
                </form>
                

                <div class="likes">
                    <h2 class="likes_heading"><i>Liked Jobs</i></h2>
                    <div class="likes__field">
                        <svg class="likes__icon"><use href="img/icons.svg#icon-heart"></use></svg>
                    </div>
                    <div class="likes__panel"><ul class="likes__list"></ul></div>
                </div>

           
            </header>

            <div class="results">
                <br />
                <ul class="results__list"></ul>
                <div class="results__pages"></div>
            </div>
            <div class="job"></div>
        </div>

        <footer>
            <div class="copyright">Copyright 2020 &copy; Dylan Yudis <br> Powered by Github Jobs</div>
            <div class="icon-bar">
                <a href="https://github.com/dyudis314" target="_blank" class="github"><i class="fa fa-github"></i></a> <a href="https://www.linkedin.com/in/dylanyudis/" target="_blank" class="linkedin"><i class="fa fa-linkedin"></i></a>
                <a href="mailto:dyudis314@gmail.com" target="_blank" class="google"><i class="fa fa-google"></i></a>
            </div>
          </footer>
        <script nomodule="" src="https://unpkg.com/ionicons@5.1.2/dist/ionicons/ionicons.js"></script>
        <script src="js/bundle.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.10"></script>
        <script
        src="https://code.jquery.com/jquery-3.5.1.js"
        integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
        crossorigin="anonymous"></script>

        <!-- Auto typing in search bar -->
        <script>

                const options = {
        strings: 
        [
        '^750software engineer', 
        '^1000junior dev',
        '^1000QA',
        '^1000C#',
        '^1000data engineer',
        '^1000react native', 
        '^1000frontend dev'
        ],

        typeSpeed: 60,
        backSpeed: 60,
        loop: true,
        };
    
        const typed = new Typed('.search__field', options);

       /* document.querySelector(".search__field").addEventListener("click", function() {
            typed[0].stop(true);
        });*/

        </script>
    </body>
</html>`

标签: javascriptfiletree

解决方案


推荐阅读