为什么在我的网站中实施的 javascrip 不起作用？

Question

Script i implemented into my website doesn't work, i've checked everything and im going along a tutorial.我在我的网站中实施的脚本不起作用，我已经检查了所有内容并且我正在学习教程。 Any ideas?有任何想法吗？

Link to my github repository: https://github.com/DBvagabond/dbogdanski link to webist preview: https://htmlpreview.github.io/?https://github.com/DBvagabond/dbogdanski/blob/main/index.html链接到我的 github 存储库： https://github.com/DBvagabond/dbogdanski链接到网站预览： https://htmlpreview.github.io/?https://github.com/DBvagabond/dbogdanski/mainindex/blob .html

HTML HTML

<body>
    <div class="navbar">
        <div class="container">

            <a class="logo" href="index.html"><span>d</span>bogdanski</a>

            <img id="mobile-cta" class="mobile-menu" src="images/menu1.svg" alt="menu">

            <nav>
            <img id="mobile-exit" class="mobile-menu-exit" src="images/exit1.svg" alt="exit">
                <ul class="primary-nav">
                    <li class="current"><a href="#">Work</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Shop</a></li>
                    <li><a href="#">Social</a></li>
                </ul>
                <ul class="secondary-nav">
                    <li class="contact-cta"><a href="#">Contact</a></li>
                </ul>
            </nav>

        </div>
    </div>

    <section class="hero">
        hero
    </section>
    
    <script>
        const mobileBtn = document.getElementById('mobile-cta')
              nav = document.querySelector('nav')
              mobileBtnExit = document.getElementById('mobile-exit');

        mobileBtn.addEventListener('click', () => {
            nav.classList.add('menu-btn');
        })

        mobileBtnExit.addEventListener('click', () => {
            nav.classList.remove('menu-btn');
        }) 
    </script>

</body>

SCSS SCSS

.navbar {
    background: var(--primary-color);
    padding: 1em;

    .logo {
        text-decoration: none;
        font-weight: bold;
        color: var(--secondary-color);
        font-size: 1.2em;

            span {
                color: white;
            }
    }

    nav {
        display: none;
    }

    .mobile-menu{
        width: 1.5em;
        cursor: pointer;
        display: block;
    }
    
    .container {
        display: flex;
        place-content: space-between;
    }  
        
    .mobile-menu-exit{
        width: 1.5em;
        float: right;
        margin: .5em;
        cursor: pointer;
    }
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

section {
    padding: 5em 2em;
}

nav {
    position: fixed;
    z-index: 999;
    width: 66%;
    right: 0;
    top: 0;
    background: grey;
    height: 100vh;
    padding: 1em;

    ul.primary-nav {
        margin-top: 5em;
    }

    li {
        a{
            color: var(--secondary-color);
            text-decoration: none;
            display: block;
            padding: .5em;
            font-size: 1.3em;
            text-align: right;

            &:hover {
                font-weight: bold;
            }
        }
    }
}

I checked for the errors, copied and pasted code from the repository of author.我检查了错误，从作者的存储库中复制并粘贴了代码。 mobile menu should pop up and close upon clicking hamburger menu icon.单击汉堡菜单图标时，移动菜单应弹出并关闭。

Answer 1

Why is JavaScript not working on my website?为什么 JavaScript 在我的网站上不起作用？ On the web browser menu click on the "Edit" and select "Preferences".在 web 浏览器菜单上单击“编辑”和 select “首选项”。 In the "Preferences" window select the "Security" tab.在“首选项” window select “安全”选项卡中。 In the "Security" tab section "Web content" mark the "Enable JavaScript" checkbox.在“安全”选项卡部分“Web 内容”中，选中“启用 JavaScript”复选框。 Click on the "Reload the current page" button of the web browser to refresh the page.点击web浏览器的“刷新当前页面”按钮刷新页面。

为什么在我的网站中实施的 javascrip 不起作用？

问题描述

1 个解决方案

解决方案1
0 2022-12-10 12:31:27

为什么在我的网站中实施的 javascrip 不起作用？

问题描述

1 个解决方案

解决方案1 0 2022-12-10 12:31:27

解决方案1
0 2022-12-10 12:31:27