我正在尝试使用html、CSS和java脚本创建一个弹出式搜索栏.但我的控制台上出现了一个错误

Question

<form action="" class="search-form">
<input type="search" id="search-box" placeholder="search here...">
<label for="search-box" class="fa fa-search" aria-hidden="true"></label>
</form>

我的javascript代码：

let searchForm  = document.querySelector('.search-form');
document.querySelector('#search-b t n').on click = () =>{
searchForm.classList.toggle('active');
}

错误显示：

Uncaught TypeError: Cannot set properties of null (setting 'onclick')
at script.js:5

Answer 1

首先，你的代码看起来很奇怪，而且里面出现了很多空间。我进行了编辑以删除它们，但检查所有工作是否完成。

然后，由于未能找到id为search-b t n的对象，因此出现错误。即使没有空格，它也不起作用，因为在您的表单中，没有带有此id的div。

你应该使用这样的东西：

document.querySelector('#search-box`)

因为存在此ID。