javascriptのクリックイベントでイベントのオンオフを切り替えたい

Question

前提・実現したいこと

addEventListenerで、イベントのオンオフを切り替えたい

発生している問題・エラーメッセージ

エラーメッセージはでていませんが、思うように動作しない状態です。
javascript

'use strict'
{
const sth1 = document.getElementById('sth1');
sth1.addEventListener('click' , ()=>{

if(sth1.classList.contains('pressed')){
sth1.classList.remove('pressed');
}

sth1.classList.add('pressed');
});

上記のようにif文を使って対策しようと思いましたが、うまく動作しない状態が続いています。

Answer 1

後半のsth1.classList.add('pressed');がifと無関係になっているので、条件にかかわらず実行されてしまいます。elseを使いましょう。

sth1.addEventListener('click' , ()=>{

  if(sth1.classList.contains('pressed')){
    sth1.classList.remove('pressed');
  } else {
    sth1.classList.add('pressed');
  }
});

Comments

[freemac]

後述の部分をifと関連づけないとうまく動作しないのですね。。
今後気をつけていきたいと思います。
この度は素早いご回答ありがとうございました。

[maisumakun]

ちなみに、classListにはtoggle()メソッドがあって、これであれば自前での条件分岐すら不要になります（あれば外す、なければ付ける）。

[freemac]

toggleメソッドですか。初めて耳にしました.bootstrapのaccordionを学習した際に聞いたような気もします。メソッドの情報まで親切にありがとうございます。