为什么响应模式下图标没有变化？答案

【问题标题】：why isn't the icon changing in the responsive mode?为什么响应模式下图标没有变化？
【发布时间】：2022-01-14 19:46:22
【问题描述】：

这是我第一次尝试响应式网页设计。我正在尝试创建网站菜单，这样当我单击菜单图标时，整个菜单都会下拉。我正在使用onclick 命令来执行此操作。但是当我去浏览器检查时，它显示我的 javascript 文件中有一些未捕获的错误。菜单没有下拉，甚至图标也没有像我在脚本中提到的那样变成十字。 ps：当我在媒体查询中而不是默认视图（768px）时，错误是可见的有人可以解释错误并告诉我解决方案吗？

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- My css link -->
    <link rel="stylesheet" href="style.css">
    <!-- Font Awesome Link -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">

    <title>Product Landing Page</title>
</head>
<body>
    <!-- header from here -->
    <header>
        <a href="#" class="logo"><i class="fas fa-utensils"></i> FoodCo.</a>
        <nav class="navbar">
            <a class="active" href="#home">Home</a>
            <a href="#dishes">Dishes</a>
            <a href="#about">About</a>
            <a href="#menu">Menu</a>
            <a href="#review">Reviews</a>
            <a href="#contact">Contact</a>
        </nav>

        <div class="icons">
            <i class="fas fa-bars" id="menu-bars"></i>
            <i class="fas fa-search" id="search-bars"></i>
            <a href="#" class="fas fa-heart"></a>
            <a href="#" class="fas fa-shopping-cart"></a>
        </div>
    </header>



    <!-- my js link -->
    <script src="script.js"></script>
</body>
</html>

CSS：

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');

:root{
    --green: #27ae60;
    --black: #192a56;
    --light-color: #666;
    --box-shadow:0 .5rem 1.5rem rgba(0,0,0,.1);
}
*{
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    outline: none;
    border: none;
    text-transform: capitalize;
    transition: all .3s linear;
}

html{
    font-size: 62.5%;
    overflow: hidden;
    scroll-padding-top:5.5rem;
    scroll-behavior: smooth;
}

header{
    position: fixed;
    top: 0; left: 0; right: 0;
    background: white;
    padding: 1rem 7%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 1000;
    box-shadow: var(--box-shadow);
}

header .logo{
    color:var(--black);
    font-size: 2.5rem;
    font-weight: bolder;
}

header .logo i{
    color: var(--green);
}

header .navbar a{
    font-size: 1.7rem;
    border-radius: .5 rem;
    padding: .5rem 1.5rem;
    color:var(--light-color);
}

header .navbar a.active{
    background-color: var(--green);
    border-radius: .5rem;
    color: white;
}

header .navbar a:hover{
    background-color: var(--green);
    border-radius: .5rem;
    color: white;
}

header .icons i,
header .icons a{
    cursor: pointer;
    margin-left: .5rem;
    height: 4.5rem;
    line-height: 4.5rem;
    width: 4.5rem;
    text-align: center;
    font-size: 1.7rem;
    color: var(--black);
    border-radius: 50%;
    background: #eee;
}

header .icons i:hover,
header .icons a:hover{
    color: white;
    background: var(--green);
    transform: rotate(360deg);
}

header .icons #menu-bars{
    display: none;
}

/* media queries */
@media (max-width:991px){
    html{
        font-size: 55%;
    }

    header{
        padding: 1rem 2rem;
    }
}

@media (max-width:768px){
    header .icons #menu-bars{
        display:inline-block;
    }

    header .navbar{
        position: absolute;
        top:100%; right: 0; left: 0;
        background: white ;
        border-top: .1rem solid rgba(0, 0, 0, .2);
        border-bottom: .1rem solid rgba(0, 0, 0, .2);
        padding: 1rem;
        clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    }

    header .navbar.active{
        clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    }

    header .navbar a{
        display: block;
        padding: 1.5rem;
        margin: 1rem;
        width: 150px;
        font-size: 2rem;
        background: white;
    }
}

@media (max-width:991px){
    html{
        font-size: 50%;
    }
}

JS：

let menu = document.querySelector('#menu-bar');
let navbar = document.querySelector('.navbar');

menu.onclick = () =>{
    menu.classList.toggle('fa-times');
    navbar.classList.toggle('active');
}

【问题讨论】：

请仅发布相关代码，这将提高获得解决方案的机会。

标签： javascript html css

【解决方案1】：

由于代表不足，我还不能写评论，我已经开始检查你的代码，并注意到你在 querySelector 中的 id 是错误的，你写了“#menu-bar”，但在你的 html 中你写了 menu-酒吧。此外，您已使菜单不显示，因此您无法单击它并触发事件。如果不是您的问题，请发表评论，我会继续。

【讨论】：

【解决方案2】：

在您的 html 文件中有以下代码：

 <i class="fas fa-bars" id="menu-bars"></i>

在您的 script.js 文件中，您有以下代码：

let menu = document.querySelector('#menu-bar');

你需要输入“s”

let menu = document.querySelector('#menu-bars');

那么就改成cross

【讨论】：

感谢@Deotyma 的回答