JavaScript ボタンクリックで、同じクラス名の複数要素に別のクラス名を付与したい

Question

実現したいこと

<div class="movie-button">をクリックしたら、すべての<div class="slider-item">に別のクラス名（.click）を付与したい。

発生している問題・分からないこと

<div class="movie-button">をクリックしたら全ての<div class="slider-item">に別のクラス名「.click」を付与するJavascriptを書きたいのですが、書き方に苦戦しております。

記載のJavascriptだと、3つの<div class="slider-item">のうち一番上のみクラス名（.click）が付与されます。全ての<div class="slider-item">にクラス名（.click）を付与したい場合、どう書けばよろしいでしょうか。

調べつつ解読しながら色々と試してみたのですが、思うような動きにならず質問させていただきました。知識不足で恐縮ですが、よろしくお願いいたします。

該当のソースコード

<div id="movie-button">
                <div class="movie-button">
                 <span class="movie-button-pause"><img src="img/button_2.png" loading="lazy"></span>
                 <span class="movie-button-play"><img src="img/button_1.png" loading="lazy"></span>
                </div>
</div>
<div class="slider">
                <div class="slider-item"></div>
                <div class="slider-item"></div>
                <div class="slider-item"></div>
</div>

const slideritem = document.querySelector(".slider-item");
const moviebutton = document.querySelector(".movie-button");

moviebutton.addEventListener("click", () => {
slideritem.classList.toggle("click");
});

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

teratail、Google等で検索して同じように書いてみましたが、クラス名（.click）の付与ができませんでした。

補足

特になし

Comments

[yambejp]

".movie-button"はHTML内で宣言されてないのでヒットしないと思います

[ai.]

コメントありがとうございます。質問内容につきまして修正いたしました。ご確認のほど何卒よろしくお願いいたします。

Answer 1

付与するのでしょうか？トグルするのでしょうか?

document.addEventListener('click',({target})=>{
  if(target.closest('.button')){
    document.querySelectorAll('div.slider-item').forEach(x=>x.classList.add('click'));
  }
});

トグルする場合はadd→toggleで

document.addEventListener('click',({target})=>{
  if(target.closest('.button')){
    document.querySelectorAll('div.slider-item').forEach(x=>x.classList.toggle('click'));
  }
});

Comments

[ai.]

ご回答ありがとうございます。
分かりずらく失礼いたしました。

トグルしたいです。
<div class="button">をクリックした際に、すべての<div class="slider-item">に別のクラス名「click」を付与、再度クリックすると「click」クラス削除、を繰り返しできるようにしたいです。

[yambejp]

追記しておきましたがaddをtoggleにすれば大丈夫です

[ai.]

回答ありがとうございます。試したところ問題が解決いたしました。
ベストアンサーに選ばせていただきました。この度は迅速なご回答、ありがとうございました。