I have this code:

   <div id="affichageRecherche"></div>
   <div class="row px-xl-9 d-flex justify-content-start" id="affichageCatalogue">(lot of code)</div>

And this script in bottom of the page:

<script>
let recherchePieceDetachees = document.getElementById('recherchePieceDetachees');
let affichageRecherche = document.getElementById('affichageRecherche');
let affichageCatalogue = document.getElementById('affichageCatalogue');

        recherchePieceDetachees.addEventListener('keyup', () => {
        if(recherchePieceDetachees.value.length > 2){

            affichageCatalogue.style.display = "none";
            fetch('../../requetes/catalogue-piece-detachee.php?recherche='+recherchePieceDetachees.value)
                .then(response => response.text())
                .then((response) => {
                    console.log(affichageCatalogue.style.display)
                    
                    affichageRecherche.innerHTML = response;
                })
                .catch(err => console.log(err));
                
        }else{
            affichageCatalogue.style.display = "block";
            affichageRecherche.innerHTML = "";
        }
    });
</script>

But when recherchePieceDetachees.value.lenght is > 2 affichageCatalogue.style.display = "none" doesn't work.

In "console display: none is write, but the block is always visible...

Console

Can somebody help me ? And sorry for my English... :) Thanks !