ifでclassの追加削除を繰り返し実行出来ない原因が知りたいです。

Question

ボックスをクリックすることで左にボックスが移動し、再度ボックスをクリックすることで元の位置にボックスを戻すコードを書いてみました。

しかし、一度目の実行（ボックスが左に動いて、戻るまで）は出来るのですが、二度目の実行が出来ずボックスが元の位置に戻ってから
動こなくなってしまいます。

原因と解決方法を教えて頂きたいです。
どうぞよろしくお願いいたします。

<div id="box"></div>

#box{
  width: 100px;
  height: 100px;
  background-color: lime;
  
}
.slide {
  transform: translate(100px, 0);
  transition: 2s ease-out;
}
.Back {
  transform: translate(0, 0);
  transition: 2s ease-out;
}

 document.querySelector('#box').addEventListener('click',function(){
 const hasSlide = document.querySelector('#box').className;
 	if(hasSlide !== 'slide'){
  	document.querySelector('#box').classList.add('slide');
  }else{
   document.querySelector('#box').classList.replace('slide','Back');
  }
 });

Answer 1

if(hasSlide !== 'slide'){

1周目
hasSlideは空→"slide"→"Back"
2周目
"slide Back"になってそれ以降変化しない

こうするとよいです

window.addEventListener('DOMContentLoaded', function(e){
  document.querySelector('#box').addEventListener('click',function(e){
    var c=e.target.classList;
    c.toggle('slide');
    c.toggle('Back',!c.contains('slide'));
  });
});

Comments

[katopa165]

原因と解決方法教えていただきありがとうございます！
前回教えて頂いたコードの書き方参考にさせて頂いています！
今回も教えて頂いたコードから勉強させて頂きます。
ありがとうございました。