rubyやjavascriptを使ってクリックするとボタンの色と文字が変わるようにしたい

前提・実現したいこと

ruby,rubyonrailsで
画面に表示されてあるボタンをクリックすると
ボタンの文字と色が変わる動き、アプリを作りたい。

クリックすると
ボタンが　ON　と表示され、　ボタンの色が緑
もう一度クリックすると
ボタンが　OFFと表示され、　ボタンの色が灰色

この動きを作ってみたい。

###質問・参考コード
某サイトのjavascriptでおみくじアプリを改良してボタンを押したら
色が変わる方法を探しております。

ボタンを押したときに「凶」が出た時の色が常時反映されてしまう。
大吉、中吉　と　それぞれ指定している　色を出したい。

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

######画面の状態
初期画面

大吉

凶

中吉

大吉_緑

該当のソースコード

js
1
2function check() {
3
4  const btn = document.getElementById('btn');
5
6  btn.addEventListener('click', () => {
7    const n = Math.random();
8    if (n < 0.25) {
9      btn.textContent = '大吉';
10      btn.classList.add('daikiti');
11
12    }else if (n < 0.50){
13      btn.textContent = '中吉';
14      btn.classList.add('chukiti');
15
16    }else{
17      btn.textContent = '凶';
18      btn.classList.add('kyo');
19
20    }
21  });
22}
23  window.addEventListener("load", check);

html.erb

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="utf-8">
5  <title>おみくじ</title>
6  <link rel="stylesheet" href="app/assets/stylesheets/styles.css">
7</head>
8  <body>
9    <div id= "btn">?</div>
10        <script src= "app/javascript/main.js"></script>
11        
12
13  </body>
14</html>

css
1body{
2  background: #efefef;
3
4}
5
6#btn{
7  width: 200px;
8  height: 200px;
9  background: #ef454a;
10  border-radius: 50%;
11  margin: 30px auto;
12  text-align: center;
13  line-height: 200px;
14  color: #fff;
15  font-weight: bold;
16  font-size: 42px;
17  cursor: pointer;
18  box-shadow: 0 10px 0 #d1483e;
19  user-select: none;
20}
21    #btn:hover{
22      opacity: 0.9;
23    }
24
25    #btn:active{
26      box-shadow: 0 5px 0 #d1483e;
27      margin-top: 35px;
28    }
29
30    #btn.daikiti{
31      background:red;
32      border-radius :50%; ;
33      transform: rotate(360deg);
34    }
35
36    #btn.chukiti{
37      background:blue;
38      border-radius :50%; ;
39      transform: rotate(360deg);
40    }
41
42    #btn.kyo{
43      background:green;
44      border-radius :50%; ;
45      transform: rotate(360deg);
46    }

試したこと

有料サイトにてpostモデルを追加、migrateにてBooleanを入れて真偽を問うような記述、
クリックを入れると変化するコードが合ったので参考にしてみるも
indexページは「？」のままでおみくじの文字は表示されなかった。

ruby
1class PostsController < ApplicationController
2  def index
3    
4  end
5
6  def checked
7    post = Post.find(params[:id])
8    if post.checked 
9      post.update(checked: false)
10    else
11      post.update(checked: true)
12    end
13
14    item = Post.find(params[:id])
15    render json: { post: item }
16  end
17end

js
1function check() {
2
3  const posts = document.querySelectorAll(".post");
4  const btn = document.getElementById('btn');
5
6  posts.forEach(function (post) { 
7
8  btn.addEventListener('click', () => {
9    const n = Math.random();
10    if (n < 0.25) {
11      btn.textContent = '大吉';
12      btn.classList.add('daikiti');
13
14    }else if (n < 0.50){
15      btn.textContent = '中吉';
16      btn.classList.add('chukiti');
17
18    }else{
19      btn.textContent = '凶';
20      btn.classList.add('kyo');
21
22    }
23  });
24});
25}
26  window.addEventListener("load", check);

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

os: macOS Catalina
バージョン　10.15.7

sw_vers
ProductName:	Mac OS X
ProductVersion:	10.15.7
BuildVersion:	19H2

ruby --version
ruby 2.6.5p114 (2019-10-01 revision 67812) [x86_64-darwin19]

rails -v
Rails 6.0.4

エディタ
ｖｓcode
バージョン: 1.58.0

行動規範の内容に同意します

回答1件

ベストアンサー

クラスを追加するだけではなく、他のクラスを取り除いてあげてください。

javascript
1function check() {
2
3  const btn = document.getElementById('btn');
4
5  btn.addEventListener('click', () => {
6    const n = Math.random();
7    /* 追加ここから */
8    clearClass(btn)
9    /*　追加ここまで */
10
11    if (n < 0.25) {
12      btn.textContent = '大吉';
13      btn.classList.add('daikiti');
14    } else if (n < 0.50) {
15      btn.textContent = '中吉';
16      btn.classList.add('chukiti');
17    } else {
18      btn.textContent = '凶';
19      btn.classList.add('kyo');
20    }
21  });
22}
23window.addEventListener("load", check);
24
25// 指定してあるクラスを全て取り除く
26// 特定のクラスだけ取り除きたいなら、クラスを指定してremoveする
27function clearClass(element) {
28  element.classList.remove(...element.classList)
29}