getElementByIdが繰り返し処理されません。

Question

前提・実現したいこと

max/mspという別ののソフトウェアからの命令により、JavaScriptでのカウントダウンをHTML上で表示しております。
毎度3,2,1とカウントダウンは表示されるのですが、document.getElementById("button1").classList.add("functionbutton2");と
document.getElementById("button1").classList.add("functionbutton3");
のCSSが最初の一度しか反映されません。
こちらはカウントダウン中にCSSを情報を反映させたいという事で書きました。（書く場所が正しいかどうかは分かりません、、、）
何か対処法があればよろしくお願いします。

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

document.getElementById("button1").classList.add("functionbutton2");
document.getElementById("button1").classList.add("functionbutton3");

該当のソースコード

<div class="functionbutton2 functionbutton3">
<button class="btn btn-gradient" id="button1"></button>
</div>

if (num == 1){
  let num1= 3;
  $("#button1").text(3);
  document.getElementById("button1").classList.add("functionbutton2");
 const countUp = () =>{
   console.log(num1--);
 }
 const intervalId = setInterval(() =>{
   countUp();
    $("#button1").text(num1);
   if(num1 <= -1){　
     clearInterval(intervalId);
     $("#button1").text("");
       document.getElementById("button1").classList.add("functionbutton3");
   }}, 1000);
 }

button.btn-gradient {
margin: auto auto;
  font-size: 80px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-family:'Montserrat', Helvetica, Arial, sans-serif;
  color: rgb(255,255,255);
  width: 400px;
  height: 400px;
background-color: rgb(0,0,255);
}

.functionbutton2{
border-radius: 50%;
}

.functionbutton3{
border-radius:0%;
}

試したこと

CSSセレクタを取得しようとすると
Uncaught SyntaxError: Private field '#button2' must be declared in an enclosing class
と表示されてしまいました。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[m.ts10806]

jQueryを採用されるのであればjQueryのセレクタ参照と機能を利用されたほうが実装に迷いがなくなると思います。

あとコードはファイル毎にマークダウンのcode機能を利用してご提示ください。
https://teratail.com/questions/238564

[退会済みユーザー]

functionbutton2やfunctionbutton3で示すクラスは、なにかアニメーションですか？ クラス付与のみ行って除去していないから、最初の一度しか反映されないのは至極当然に思うのですが。質問文中に関連CSSを示してもらうのと、やりたいことを図示してもらえれば助言しやすいです。

[Yuki]

.functionbutton2{
border-radius: 50%;
}

.functionbutton3{
border-radius:0%;
}

情報が足りず申し訳ありません。
普段は背景が正方形でカウントダウン中は文字の背景を円にしたく、カウントダウンが終了したらまた正方形に戻るといった具合です。

[Yuki]

クラスの除去が必要という事は知りませんでした。ありがとうございます。

[m.ts10806]

コードはファイル毎にマークダウンのcode機能を利用してご提示ください。
https://teratail.com/questions/238564

[Yuki]

CSSで解決できない場合はjQueryを採用したいと思います。

[Yuki]

すみません、、、質問の方を更新させていただきました。

[int32_t]

できれば、誰でも問題が再現できるように完全なコードを開示してください。

スタイルシートの中で、.functionbutton2 と .functionbutton3 はこの順番で書かれていますか?
classList.add("functionbutton3") が呼ばれたはずの後のタイミングで、ブラウザの開発者ツールで id="button1" の要素の class 属性がどうなっているか確認してください。

[m.ts10806]

```言語名
コード
```

です。（バッククォートなので注意）

Answer 1

button4_element.classList.remove("functionbutton3");
を加えたら解決しました。
やはり、クラス付与のみ行って除去していないという状況でした。
ありがとうございます。