Why doesn't validation work in js?

Question

JavaScript

There are two blocks with a data attribute:

<div class="main__categoties-wrapper__categorie" data-number="1" onclick="dropCategorie(this.dataset.number)">
        <h1 class="main__categoties-wrapper__categorie-name">Очки</h1>
        <img src="img/down-arrow.svg">
      </div>
      <div class="main__categoties-wrapper__categorie-item" data-number="1">
        <img width="100px" src="img/glasses.jpg">
        <h1 class="main__categoties-wrapper__categorie-item__tittle">Очки авиаторы</h1>
        <h2>Артикул: 1434</h2>
        <h2>Количество: 50 шт.</h2>
      </div>

And js code:

function dropCategorie (dropdownCategorieNumber) {
  var categorie = document.querySelector(`.main__categoties-wrapper__categorie-item[data-number="${dropdownCategorieNumber}"]`);
  console.log(categorie);
  if (categorie.style.display == "none"){
    categorie.style.display = "flex";
  } else if (categorie.style.display == "flex") {
    categorie.style.display = "none";
  } else {
    console.log("Что то пошло не так");
  }
}

The logic of work is as follows: you need to find a block with the desired attribute and check its style, and in accordance with this, hide or show it. But the console first displays the block with the attribute and then displays "something went wrong".