The buttons don't change the showing data and content categories

Question

I made a button-like menu inside a section and the only problem with it is that data categories don't change after clicking on a button. What is wrong with the Javascript code? I have a similar menu with buttons instead of h4 and almost the same Javascript for it and it works. Thanks in advance.

const filterButtons2  = document.querySelectorAll(".filter_buttons2 h4");
const filterableWorks = document.querySelectorAll(".filterable_works .work");

const filterWorks = (e) => {
  document.querySelector(".active3").classList.remove("active3");
  e.target.classList.add("active3");

  filterableWorks.forEach((work) => {
    work.classList.add("hide");
    if (
      work.dataset.name === e.target.dataset.name ||
      e.target.dataset.name === "all2"
    ) {
      work.classList.remove("hide");
    }
  });
};

filterButtons2.forEach((h4) => h4.addEventListener("click", filterWorks));

.filter_buttons2 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

h4 {
  padding: 10px 20px;
  font-size: 18px;
  background: #ffffff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  box-shadow: 0 0 10px #000000;
}

h4.active3 {
  padding: 10px 20px;
  font-size: 18px;
  background: #670101;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  box-shadow: 0 0 10px #000000;
}

.filterable_works {
  display: contents;
  margin-top: 25px;
  gap: 20px;
  flex-wrap: wrap;
}

.work {
  position: relative;
  max-width: 1300px;
  width: 100%;
  padding: 20px;
  margin: 0;
}

<div class="filter_buttons2">
  <h4 class="active3" data-name="all2">Pokaż wszystkie</h4>
  <h4 data-name="music">Muzyka</h4>
  <h4 data-name="films">Filmy</h4>
  <h4 data-name="photography">Fotografia</h4>
  <h4 data-name="copywriting">Copywriting</h4>
</div>
<div class="filterable_works">
  <div class="work" data-name="music">
    <p>ddddd</p>
  </div>
  <div class="work" data-name="films">
    <p>gfjdfgjfg</p>
  </div>
  <div class="work" data-name="photography">
    <p>dsfsfgsghdf</p>
  </div>
  <div class="work" data-name="copywriting">
    <p>daaaasadd</p>
  </div>
</div>

I ask for help with the Javascript. I am a noob with it. Perhaps there are faults in the HTML or CSS codes.

Answer 1

const filterableWorks = document.querySelectorAll('.filterable_works .work');

document.querySelectorAll('.filter_buttons2 h4').forEach( (h4, _, AllH4) => 
  {
  h4.onclick =_=>
    {
    AllH4.forEach( x4 => x4.classList.toggle('active3', x4===h4));
    filterableWorks.forEach( wk => 
      wk.classList.toggle( 'noDisplay'
                           , h4.dataset.name !== 'all2' 
                         &&  h4.dataset.name !== wk.dataset.name 
      ));
    }
  });

.filter_buttons2 {
  display     : flex;
  align-items : center;
  flex-wrap   : wrap;
  gap         : 10px;
  }
h4 {
  padding       : 10px 20px;
  font-size     : 18px;
  background    : white;
  border        : none;
  border-radius : 6px;
  cursor        : pointer;
  box-shadow    : 0 0 10px #000000;
  }
h4.active3 {
  padding       : 10px 20px;
  font-size     : 18px;
  background    : #670101;
  color         : white;
  border        : none;
  border-radius : 6px;
  cursor        : pointer;
  box-shadow    : 0 0 10px #000000;
  }
.filterable_works {
  display    : contents;
  margin-top : 25px;
  gap        : 20px;
  flex-wrap  : wrap;
  }
.work {
  position  : relative;
  max-width : 1300px;
  width     : 100%;
  padding   : 20px;
  margin    : 0;
  }
.noDisplay {
  display: none;
  }

<div class="filter_buttons2">
  <h4 data-name="all2"  class="active3" > Pokaż wszystkie </h4>
  <h4 data-name="music"                 > Muzyka          </h4>
  <h4 data-name="films"                 > Filmy           </h4>
  <h4 data-name="photography"           > Fotografia      </h4>
  <h4 data-name="copywriting"           > Copywriting     </h4>
</div>
<div class="filterable_works">
  <div class="work" data-name="music">       <p>ddddd</p>        </div>
  <div class="work" data-name="films">       <p>gfjdfgjfg</p>    </div>
  <div class="work" data-name="photography"> <p>dsfsfgsghdf</p>  </div>
  <div class="work" data-name="copywriting"> <p>daaaasadd</p>    </div>
</div>