JavaScript 部分无法运行

Question

因此，在我正在使用的网站中，我尝试让用户单击搜索按钮时出现搜索栏。

搜索按钮 - html :

<header class="header">
    <div class="icons"> 
                <div class="fa fa-search" id="search-btn"></div>
    </div>
</header>

搜索框 - html :

 <form class="search-form">
            <input type="text" class="search" id="search-box" placeholder="Search here...">
            <label for="search-box" class="fa fa-search"></label>
 </form>

我添加了默认的 css 样式，使搜索框在单击搜索按钮之前消失。 （因为将其添加到负值）

.header .search-form {
    border: 0px solid;
    position: absolute;
    top: 110%;                      
    right: -110%;    /*<= this line here*/                   
    width: 50rem;
    height: 5rem;
    background: #fff;
    border-radius: .5rem;
    overflow: hidden;
    display: flex;
    align-items: center;            
}

并设置“活动类”来触发事件（onclick使搜索框从它所在的位置向左移动）

注意：-我在搜索框中检查了这个“正确”值（在下面），它清晰可见。

.header .search-form .active{
    right: 2rem;
}

并添加了以下脚本

let searchForm = document.querySelector('.search-form');

document.querySelector('#search-btn').onclick = () => {
    searchForm.classList.toggle('active');
}

但它似乎不起作用。

我尝试将其添加到js中并将元素设置为

<div class="fa fa-search" id="search-btn" onclick="function_name()"></div>

它也不起作用，我仔细检查了 JS 文件的路径并且