ルーレットを動かしたい

###前提・実現したいこと
JavaScriptでルーレットを作成しています。
ルーレットを作成までは出来たのですが、ボタンを押しても動作しません。
スタート・ストップ・リセットのボタンを押すことは出来るんですが、ルーレットが光りません。
ソースの改善点や参考を教えて下さるとうれしいです。
よろしくお願い致します。

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

ボタンを押してもルーレットが光らない

###該当のソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>ルーレット</title>
    <style type="text/css">
        table,td {
            border:solid 1px black;
            font-size:70px;
            text-align:center;
        }
        #box {
            margin:auto;
            position:absolute;
            top:0px;
            bottom:0px;
            left:0px;
            right:0px;
        }
    </style>
</head>
<body>
    <script>
    $(function() {
      var l=$('#t1 td').length;
      var timerId;
       $(document).on('click','[value=START]',function() {
        $(this).attr('value','STOP');
        timerId=setInterval(function() {
        var rand = Math.floor(Math.random() * l);
        $('#t1 td').css({"background-Color":""});
        $('#t1 td').eq(rand).css({"background-Color":"red"});
        },100);
      }):
      $(document).on('Click','[value=STOP]',function() {
        $(this).attr('value','START');
        clearInterval(timerId);
      })
    })
    </script>
    <table id="t1">
        <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>
    <input type="button" value="スタート">
    <input type="button" value="ストップ">
    <input type="button" value="リセット">
    
</body>
</html>

###試したこと
ボタンを押しても動かない

###補足情報(言語/FW/ツール等のバージョンなど)
JavaScript

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

回答2件

ベストアンサー

}): は });ではないですか
このコード内でJqueryが入っていないのですがどこかに入れているのですか
Valueが異なっている

Jquery内では$(document).on('click','[value=START]',function() {
value="START"
実際のHTMLでは
value="スタート"
どっちかに統一してください

追記 18:28
Clickをclickにしてください

$(document).on('click','[value=ストップ]',function() {
追記 18:35
リセット例
$(document).on('click','[value=リセット]',function() {
$('#t1 td').css({"background-Color":""});
clearInterval(timerId);
$("#START").val("スタート");
})

投稿2017/05/08 09:11

編集2017/05/08 09:35