Trying to get search bar to display when you click button?-CodePudding

What I am trying to do is, that when the user clicks on the search button, the search bar displays. But for some reason, it's just not working and I have no idea, why? I double-checked on https://www.w3schools.com/jsref/event_onclick.asp just to make sure I am doing it right but to no avail. I tried the add.eventlistner that does not work, because it sees the button as null where the onclick="showBar()" should see the button, in JS.

HTML

<button onclick="showBar()"  type="submit">
  Search
  <img src="./images/iconmonstr-search-thin-240.png" alt="search icon">
</button>

CSS

.form-control, .me-2 {
  animation: slide 1s 1;
}

.me-2 {
  display: none !important;
}

let slideSearch = document.querySelector(".me-2");

function showBar() {
  slideSearch.style.display = "block";
}

CodePudding user response：

Your problem is you're using !important on display: none of .me-2.

You should not use !important in your style unless you want to hide it permanently.

let slideSearch = document.querySelector(".me-2");

function showBar() {
  slideSearch.style.display = "block";
}

.form-control, .me-2 {
  animation: slide 1s 1;
}

.me-2 {
  display: none; /*Removed !important*/
}

<button onclick="showBar()"  type="submit">
  Search
  <img src="./images/iconmonstr-search-thin-240.png" alt="search icon">
</button>
<input />

If you cannot get rid of !important for some reason. You can try to add !important to .me-2 in Javascript that would override !important in your CSS.

let slideSearch = document.querySelector(".me-2");

function showBar() {
  slideSearch.style.setProperty('display','block','important');
}

.form-control, .me-2 {
  animation: slide 1s 1;
}

.me-2 {
  display: none !important;
}

<button onclick="showBar()"  type="submit">
  Search
  <img src="./images/iconmonstr-search-thin-240.png" alt="search icon">
</button>
<input />