td要素をランダムに取得して回転する(色がつく)ルーレットを作成したいです

前提・実現したいこと

Javascriptとjqueryで、16マス(1~~16までの数字を表示)のルーレットを作成しています。現状では、スタートボタンを押すと、ランダムに1~~16の数字を0.5秒間隔で通り、通った場所に色がつく仕組みを作っております(一度通り過ぎたら色は消えて白に戻ります)。

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

プログラミング学習を始めて2カ月半ほどの者です。
スタートボタンを押しても、「１」のみしか色がつかず、動きもそこで止まってしまいます。1~16までランダムに動かすにはどのように現在のコードを修正・変更すればいいのでしょうか？

該当のソースコード

JavaScript
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <meta charset="UTF-8">
6    <title>roulette</title>
7    <link rel="stylesheet" href="roulette.css">
8    <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
9    <script>
10    var interval_id;
11    var start_flag=false;//start_roulettetの処理中はtrue
12    var len=$("#matrix td").length;
13    function start_roulette(){
14        //ランダムに取得したtd1~16に色をつける
15                var result=Math.floor(Math.random()*len);
16                $("#matrix td").css({'background-Color':''});
17                $("#matrix td").eq(result).css({'background-Color':'red'});
18        }
19    function stop_roulette(){
20        clearInterval(interval_id);
21        start_flag=false;
22    }
23        
24    function start_count(){
25        //0.5秒ごとにstart_roulette関数を実行
26        if(start_flag===false){
27            interval_id=setInterval(start_roulette,500);
28            start_flag=true;
29        }
30    }
31    $(document).ready(
32        function(){
33            $('#start').click(start_count);
34            $('#stop').click(stop_roulette);
35            $('#reset').click(reset_roulette);
36        
37    });
38    </script>
39</head>
40
41<body>
42    <table id="matrix">
43     <tr>
44    <td>1</td>
45    <td>2</td>
46    <td>3</td>
47    <td>4</td>
48</tr>
49<tr>
50    <td>5</td>
51    <td>6</td>
52    <td>7</td>
53    <td>8</td>
54</tr>
55<tr>
56    <td>9</td>
57    <td>10</td>
58    <td>11</td>
59    <td>12</td>
60</tr>
61<tr>
62    <td>13</td>
63    <td>14</td>
64    <td>15</td>
65    <td>16</td>
66</tr>
67    </table>
68    <button id="start">スタート</button>
69    <button id="stop">ストップ</button>
70    <button id="reset">リセット</button>
71</body>
72</html>
73

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

回答3件

ベストアンサー

var len = $("#matrix td").length;

このコードはDOMがマウントされる前に実行されているので、取得できる要素が何もなく長さが0になっています。
lenが0ならresultも常に0です。

jqueryの$(window).on('load', function() { ... })などで全体を囲むか、start_roulette内で長さを取得するようにしてください。

余談

初学者の方にありがちなんですが、実際の動作から間違いを探すのではなくソースコードをにらめっこして「何が違うんだろう？」と考えるのは大抵時間の無駄です。

ルーレットが1から動かない
start_rouletteが動いているか確認(console.log('start roulette')など)
→動いてる
resultが何になっているか確認(console.log(result))
→ずっと0だ
Math.random()の使い方が間違ってる？(console.log(Math.random())
→ランダムで表示される
Math.random() * lenは？
→0だ
じゃあlenは？

　　→これが0だ

$("#matrix td").length;が違う？
→クリック時に取得してみたらちゃんとした長さが取れる
なんで関数の外だとダメなんだ？

みたいな感じです。
そこから「DOMにマウントされる前に実行されている」という理由にたどり着くのは少し難しいかもしれませんが、「jquery 要素取得できない」という検索にはたどり付けそうなので多分解決できます。

投稿2021/08/22 07:26

編集2021/08/22 07:27

k_a

総合スコア983

chacharo

2021/08/24 13:02

素早いご回答をありがとうございます。確かに、ご指摘いただいた点をもとにコードを見直してみると異変に気がつくことができました。「余談」でのご丁寧なアドバイスもありがとうございました。ぜひ励みに今後も頑張ってみようと思いました。

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

javascript
1<style>
2#matrix{
3border-collapse:collapse;
4}
5#matrix td{
6border:solid 1px #000000;
7}
8#matrix td.selected{
9background-Color:red;
10}
11</style>
12<script>
13window.addEventListener('DOMContentLoaded', ()=>{
14  const start=document.querySelector('#start');
15  const stop=document.querySelector('#stop');
16  const reset=document.querySelector('#reset');
17  let timerId;
18  start.addEventListener('click',()=>{
19    start.disabled=true;
20    stop.disabled=false;
21    reset.disabled=true;
22    timerId=setInterval(()=>{
23      const tds=[...document.querySelectorAll('#matrix td:not(.selected)')];
24      resetFunc();
25      const idx=parseInt(Math.random()*tds.length);
26      tds[idx].classList.add('selected');
27    },500);
28  });
29  stop.addEventListener('click',()=>{
30    start.disabled=false;
31    stop.disabled=true;
32    reset.disabled=false;
33    clearInterval(timerId);
34  });
35  const resetFunc=()=>document.querySelector('#matrix td.selected')?.classList.remove('selected');
36  reset.addEventListener('click',resetFunc);
37});
38</script>
39<table id="matrix">
40<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
41<tr><td>5</td><td>6</td><td>7</td><td>8</td></tr>
42<tr><td>9</td><td>10</td><td>11</td><td>12</td></tr>
43<tr><td>13</td><td>14</td><td>15</td><td>16</td></tr>
44</table>
45<button id="start">スタート</button>
46<button id="stop" disabled>ストップ</button>
47<button id="reset">リセット</button>