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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JAR

JAR(又はJava ARchive)はコンパイルされた複数のJavaバイトコード及び関連ファイルのリソースを一つのファイルに統合したものです。JARファイルはZIPファイルのフォーマットで構築されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

1929閲覧

Javascriptでルーレット作成 リセットボタンで初期化の方法

Mackatta

総合スコア3

JAR

JAR(又はJava ARchive)はコンパイルされた複数のJavaバイトコード及び関連ファイルのリソースを一つのファイルに統合したものです。JARファイルはZIPファイルのフォーマットで構築されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2020/08/08 11:54

前提・実現したいこと

初心者です。
16マスのルーレットを作成したのですが、リセットボタンの実装がうまくできず困っています。

1つ目はリセットボタンを押すと今までのルーレット結果を初期化し再度0から実装できる様にする
下記のコードの書き方が悪いせいか16回実装させてしまうと動かなくなる。

申し訳ございませんが知識のある方ご回答よろしくお願いします

Javascript

1$("#start").prop("disabled", hairetu <= 0);

該当のソースコード

<!DOCTYP html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>JSルーレット</title> <script src="jquery-3.5.1.min.js"></script> <script> $(function() { $("#start").click(roulette_start); $("#stop").click(roulette_stop); $("#reset").click(roulette_reset); var hairetu = new Array(); for (i =0; i < 4; i++) { var tr = $("<tr>"); for(j =0; j < 4; j++ ) { var num = i *4 + j + 1; tr.append($("<td>").text(num)) hairetu.push(num-1); } $("table").append(tr) } let interval_id; let lottery_kekka; function roulette_start() { interval_id = setInterval(lottery, 10); $("#start").prop("disabled",true); $("#stop, #reset").prop("disabled",false); $("td.tomatta_now").removeClass("tomatta_now").addClass("tomatta_ato") } function lottery() { lottery_kekka = Math.floor( Math.random() * hairetu.length); $("td").removeClass("tomatta") $("td").eq(hairetu[lottery_kekka]).addClass("tomatta") } function roulette_stop() { clearInterval(interval_id); $("td.tomatta").removeClass("tomatta").addClass("tomatta_now") hairetu.splice(lottery_kekka,1); $("#stop").prop("disabled", true); $("reset").prop("disabled", false); $("#start").prop("disabled", hairetu <= 0); } function roulette_reset() { clearInterval(interval_id); $("td").removeClass("tomatta_now").removeClass("tomatta_ato") $("#start").prop("disabled",false); $("#stop").prop("disabled",true); } }); </script> <style> td { text-align: center; border: solid 1px #000000; } table { margin: auto; font-size: 50px; border: solid 5px #000000; border-collapse: collapse; } .button3tu { text-align: center; margin-top: 20px; } .tomatta { background-color: #fff000; /*黄色*/ } .tomatta_now { background-color: #0000ff; /*青*/ } .tomatta_ato { background-color: #FFFFCC; /*薄い黄色*/ } </style> </head> <body> <table> </table> <div class="button3tu"> <button id="start">スタート</button> <button id="stop">ストップ</button> <button id="reset">リセット</button> </div> </body> </html>

試したこと

Javascript

1function roulette_reset() {

上記の関数にsetIntervalを追加

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

配列が初期化されてないのが原因だと思ったので、

javascript

1 function roulette_reset() { 2 clearInterval(interval_id); 3 hairetu = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16];

最後のこの関数に上記のように配列を入れてみたら一応、リセットもちゃんと動作しました。

投稿2020/08/08 12:40

Jon_do

総合スコア1373

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Mackatta

2020/08/08 13:09

ご回答ありがとうございます。 私も今追加して確認したところ実装できました! もしよろしければこの配列を追加した事で初期化された理由の解説も お願いしてもよろしいでしょうか? なぜこれだけで実装できたのか理解できていないので、、、
Jon_do

2020/08/08 14:57

最初にfor文で作成したhairetuは for文が起動した最初だけ中身がある状態であるため 途中でhairetu.splice(lottery_kekka, 1) とやってるのでストップするたびに配列の中身が無くなります。 配列には何も入っていないので質問の記述だけだと動かなくなります。 なのでリセットするときに配列の中身を戻す必要がありました。
Mackatta

2020/08/08 15:30

なるほど!わかりやすい解説ありがとうございました‼︎
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問