我正在尝试使用 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>

My javascript code:

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

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

the error says:

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

Answer 1

Firstly, your code seems strange ans lot of space appear in it. I edit to remove them, but check that all works are complete.

Then, the error comes because it failed to find the objet with id search-b tn . Even without space, it doesn't works because in your form, there is no div with this id.

You should use something like this:

document.querySelector('#search-box`)

Because this ID exist.