クリックによって動的にclass名の切り替えを行いたい

Question

前提・実現したいこと

以下のHTMLで動的にclass名を切り替えたいです。

イメージとしては、クリックしたclass="cell"に対してclass="cell active"というように、
どちらをクリックしたかが分かるclass名を与えたいです。

<div class="form-control"id="form-segment">
    <a href="#" class="cell active">ログイン</a>
    <a href="#" class="cell">新規登録</a>
</div>

該当のソースコード

<div class="form-control"id="form-segment">
    <a href="#" class="cell">ログイン</a>
    <a href="#" class="cell">新規登録</a>
</div>

試したこと

<script>

    const target = document.querySelectorAll('.cell');

    target.forEach(function(el){
        el.addEventListener('click',function(){
            this.classList.toggle('active');
        });
    })
</script>

console.log(target)の結果nodelistはとれているのですが、
これらの要素にクリックイベントをつけ、クリックされたものについてtoggleでclass名を与えるということが
できていません。

NodeList(2) [a.cell, a.cell]
0: a.cell
1: a.cell
length: 2
[[Prototype]]: NodeList

※JQueryは今回用いません

Comments

[yambejp]

activeなcellを再度クリックしたらactiveを外すかどうかによります

Answer 1

<style>
.cell.active{
color:red;
}
</style>
<script>
document.addEventListener('click', (e)=>{
  const x=e.target;
  if(x.classList.contains('cell')){
    document.querySelectorAll('.cell').forEach(y=>{
      const flg=x==y;
      //const flg=x==y && !x.classList.contains('active'); //再クリックでactiveを消す
      y.classList.toggle('active',flg);
    });
  }
});
</script>
<div class="form-control"id="form-segment">
    <a href="#" class="cell">ログイン</a>
    <a href="#" class="cell">新規登録</a>
</div>

Comments

[asahiko123]

回答ありがとうございます。
再度クリックでactiveを外したかったので、意図通りの動きでした。
toggleの第二引数を使ったことがなかったので勉強になりました。

Answer 2

cell　active
全角スペースが入っているので個々のクラスとして認識されてないのでは？

Comments

[Takumiboo]

そこは例示で「こうしたい」と書いているだけなので関係ないのでは？
「該当のソースコード」でもactiveは無いので。

[asahiko123]

すみません、間隔があいてるのは記述ミスです。
紛らわしくて申し訳ありません。