Lo que estoy tratando de hacer es que cuando el usuario haga clic en el botón de búsqueda, se muestre la barra de búsqueda. Pero por alguna razón, simplemente no funciona y no tengo idea, ¿por qué? Verifiqué dos veces en https://www.w3schools.com/jsref/event_onclick.asp solo para asegurarme de que lo estaba haciendo bien, pero fue en vano. Probé el add.eventlistner que no funciona, porque ve el botón como nulo donde onclick="showBar()" debería ver el botón, en 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"; }Tu problema es que estás usando !important en display: none de .me-2 .
No debe usar !important en su estilo a menos que desee ocultarlo de forma permanente.
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"/> Si no puede deshacerse de !important por algún motivo. Puede intentar agregar !important a .me-2 en Javascript que anularía !important en su 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"/>