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()" class="btn btn-outline-success" 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;
}
JS
let slideSearch = document.querySelector(".me-2");
function showBar() {
slideSearch.style.display = "block";
}
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()" class="btn btn-outline-success" type="submit">
Search
<img src="./images/iconmonstr-search-thin-240.png" alt="search icon">
</button>
<input class="me-2"/>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()" class="btn btn-outline-success" type="submit">
Search
<img src="./images/iconmonstr-search-thin-240.png" alt="search icon">
</button>
<input class="me-2"/>