前提・実現したいこと
ルーレットの課題を作成中です
発生している問題・エラーメッセージ
リセットボタンを押すと一回目は消えるのですが、次にスタートを押しても反応しない状況になります。 Stopは反応しています。
該当のソースコード
<! doctype> <html lang="ja"> <head> <meta charset="UTF-8"> <title>ルーレット</title> <script src="https://code.jquery.com/jquery-3.5.0.min.js" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script> <link rel="stylesheet" href="Roulette.css"> <style> .colorBlue { background-color:blue; } .colorred { background-color:red; } </style> <script>// let start_flag=false; let interval_id=0; let math=0; let count=0; function start(){ if(start_flag===false){ interval_id=setInterval(random,100); start_flag=true; } } function random(){ $('td').eq(math).removeClass('colorBlue'); math=Math.floor(Math.random()*16); while($('td').eq(math).hasClass('colorred')){ math=Math.floor(Math.random()*16); } $('td').eq(math).addClass('colorBlue'); console.log(math); } function stop(){ clearInterval(interval_id); $('td').eq(math).removeClass('colorBlue'); $('td').eq(math).addClass('colorred'); count++; if(count>=16){ start_flag=true; }else{ start_flag=false; } } function reset(){ console.log("reset"); clearInterval(interval_id); count=16;//残りマス $('td').removeClass("colorBlue").removeClass("colorred"); } $(function(){ $('#start').click(start); $('#stop').click(stop); $('#reset').click(reset); } ) </script> </head> <body> <table class="box"> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> <tr> <td>5</td> <td>6</td> <td>7</td> <td>8</td> </tr> <tr> <td>9</td> <td>10</td> <td>11</td> <td>12</td> </tr> <tr> <td>13</td> <td>14</td> <td>15</td> <td>16</td> </tr> </table> <div id='button'> <button id='start'>スタート</button> <button id='stop'>ストップ</button> <button id='reset'>リセット</button> </div> </body> </html>
試したこと
もう一度Functionを入れるなどを試しましたが、うまくいきませんでした。。。
補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/08/22 12:32
2020/08/22 12:32