スタートを押したらルーレットを回したいのですが次々とパネルに色が染まり、ルーレットにならないです。　解決方法よろしくお願いします。

javascript
1<html>
2    <head>
3        <meta charset="utf-8">
4        <script src="jquery-3.4.1.min.js"></script>
5        <style>
6            #container{
7                width:800px;
8                margin:0px auto;
9                height:1400px;
10            }
11            #bord{
12                width:90%; border:5px solid #000; height:736px; margin-bottom:40px;
13            }
14            #first,#second,#third,#forth{
15                display:flex;
16            }
17            .number{
18                width:180px; height:180px; margin:0; text-align:center; line-height: 180px;font-size:70px; border:2px solid #000;
19            }
20            button{
21                width:200px; height:40px; text-align:center; font-size:32px; line-height:40px;
22            }
23            .btn{
24                 margin:0px auto; width:720px;
25            }
26            .coloring{
27                background:red;
28            }
29          
30        </style>
31        <script>
32           var click_start=false;
33           var Panel_left=16;
34           var timeoutId;
35           $(function(){$("#start").click(begin);
36           });
37            function begin(){if(click_start===false){
38               timeoutId=setInterval(roulette,10);
39                click_start=true;
40            }
41            }
42            function roulette(){var rand=Math.floor(Math.random()*16)+1;
43                $('#cell_'+rand).addClass('coloring');
44            }
45        </script>
46    </head>
47    <body>
48        <div id="container">
49          <div id="bord">
50             <div id="first">
51               <p id="cell_1" class="number">1</p>
52               <p id="cell_2" class="number">2</p>
53               <p id="cell_3" class="number">3</p>
54               <p id="cell_4" class="number">4</p>
55             </div> 
56              <div id="second">
57               <p id="cell_5" class="number">5</p>
58               <p id="cell_6" class="number">6</p>
59               <p id="cell_7" class="number">7</p>
60               <p id="cell_8" class="number">8</p>
61             </div> 
62              <div id="third">
63               <p id="cell_9" class="number">9</p>
64               <p id="cell_10" class="number">10</p>
65               <p id="cell_11" class="number">11</p>
66               <p id="cell_12" class="number">12</p>
67             </div> 
68              <div id="forth">
69                <p id="cell_13" class="number">13</p>
70                <p id="cell_14" class="number">14</p>
71                <p id="cell_15" class="number">15</p>
72                <p id="cell_16" class="number">16</p>
73             </div> 
74              
75          </div>
76         <div class="btn">
77          <button id="start">スタート</button>
78          <button id="stop">ストップ</button>  
79          <button id="reset">リセット</button>  
80         </div>
81        </div>
82    </body>
83</html>
84コード

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

回答1件

ベストアンサー

jQuery
1$('#cell_'+rand).addClass('coloring');

addClassしてるだけで removeClassしてないからでは？
赤色つけたなら外さないとそりゃどんどん赤色になりますよ

投稿2020/02/26 00:42

azuapricot

総合スコア2341

YutaEvol

2020/02/26 10:12

ありがとうございました????

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

スタートを押したらルーレットを回したいのですが次々とパネルに色が染まり、ルーレットにならないです。　解決方法よろしくお願いします。

関連した質問