0
<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
Elikill58
  • 4,050
  • 24
  • 23
  • 45
Sally
  • 1
  • 1
    Check out the extraneous spaces in your code. – A Haworth Dec 21 '21 at 20:10
  • https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element – epascarello Dec 21 '21 at 20:11
  • your Search form is visible by default, what do you mean about creating a search bar on popup? do you mean you want a search button and when you click on that button a popup shows with a search wrapper in it? you don't have a "search-btn" id in your HTML so actually, you are accessing null things so you get that error. – SEAN Dec 21 '21 at 20:13

1 Answers1

0

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 t n. 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.

Elikill58
  • 4,050
  • 24
  • 23
  • 45