I'm struggling with this code:
<div id="affichageRecherche"></div>
<div class="row px-xl-9 d-flex justify-content-start" id="affichageCatalogue">(lot of code)</div>
At the bottom of the page, I have this script:
<script>
let searchSpareParts = document.getElementById('searchSpareParts');
let displaySearch = document.getElementById('displaySearch');
let displayCatalog = document.getElementById('displayCatalog');
searchSpareParts.addEventListener('keyup', () => {
if(searchSpareParts.value.length > 2){
displayCatalog.style.display = "none";
fetch('../../requetes/catalogue-piece-detachee.php?recherche='+searchSpareParts.value)
.then(response => response.text())
.then((response) => {
console.log(displayCatalog.style.display)
displaySearch.innerHTML = response;
})
.catch(err => console.log(err));
}else{
displayCatalog.style.display = "block";
displaySearch.innerHTML = "";
}
});
</script>
However, I'm encountering an issue where when the length of searchSpareParts.value is greater than 2, the line displayCatalog.style.display = "none" does not seem to work.
Even though the console displays "display: none", the block is still visible...
Here's a screenshot of the console
Can someone please assist me with this problem? Apologies for any language errors... :) Thank you!