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

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

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

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

解決済

関数内の変数に、関数外からアクセスしたい

DaichiNakajima
nitori-kun

総合スコア53

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

3回答

0リアクション

1クリップ

358閲覧

投稿2022/07/09 05:06

ビンゴを作っています。抽選ボタンを押すと、ランダムに1-75の数が生成されます。これを変数bに保存しています。事前に作っておいた5×5のtableの数と一致するものがあった場合、該当するマスのチェックを外し、スタイルを変えたいです。

今、以下のようなエラーが出てしまいます。おそらく、create_card関数内で定義された変数tableに、スコープの外からアクセスできないことが問題なのですが、これはどのように修正したら治りますか?

よろしくお願いいたしいます。

html

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <style> /* カード全体のスタイル */ #bingo{ width: 340px; margin: 0 auto; } /* B I N G Oと番号のスタイル */ #bingo th, #bingo td { text-align: center; font-weight: normal; } /* B I N G O の文字のスタイル */ #bingo th{ color: #B78D4A; } /* 番号のスタイルを設定 */ #bingo td { width: 60px; height: 55px; text-align: center; vertical-align: middle; border-radius: 1.5rem 1.5rem 0 0; color: #fff; background-color: #B78D4A; border: 2px solid #B78D4A; } /* 番号をチェックした時に変更するクラス、スタイルを設定 */ #bingo td.check { color: #B78D4A; background-color: #F0F0F0; } /* 番号をマウスオーバーした時にポインタを指矢印に変更 */ #bingo td:hover { cursor: pointer; cursor: hand; } /* 作成ボタンのスタイル */ p#button{ text-align: center; } /* 抽選ボタンのスタイル */ p#button2{ text-align: center; } </style> </head> <body> <div> <table id="bingo" cellspacing="10"> <tbody> <tr> <th>B</th> <th>I</th> <th>N</th> <th>G</th> <th>O</th> </tr> <tr> <td id="bi0"></td> <td id="bi1"></td> <td id="bi2"></td> <td id="bi3"></td> <td id="bi4"></td> </tr> <tr> <td id="bi5"></td> <td id="bi6"></td> <td id="bi7"></td> <td id="bi8"></td> <td id="bi9"></td> </tr> <tr> <td id="bi10"></td> <td id="bi11"></td> <td id="bi12"></td> <td id="bi13"></td> <td id="bi14"></td> </tr> <tr> <td id="bi15"></td> <td id="bi16"></td> <td id="bi17"></td> <td id="bi18"></td> <td id="bi19"></td> </tr> <tr> <td id="bi20"></td> <td id="bi21"></td> <td id="bi22"></td> <td id="bi23"></td> <td id="bi24"></td> </tr> </tbody> </table> <p id="button"><input type="button" value="カード作成" id="bingo-create"></p> <p id="button2"><input type="button" value="抽選" id="lottery"></p> </div> </body> <script src="20220709ex.js"></script> </html>

javascript

'use strict' $(function () { var make_col = function (base) { var arr = []; for(var i=0; i<15; i++) { arr.push(i); } var list = []; for (var i = 1; i <= 5; i++) { // ランダムで値を取得 var a = parseInt(Math.random() * arr.length); list.push(arr[a] + base); // 数字を重複させないため、元々のリストから値を削除する arr.splice(a, 1); } return list; }; var make_table = function () { // B列、I列...とそれぞれで5つの数字をランダムで取得 var col_b = make_col(1); var col_i = make_col(16); var col_n = make_col(31); var col_g = make_col(46); var col_o = make_col(61); // 25個分の数字を格納できるtableに取ってきた列の数字を設定 var list = new Array(25); for (var i = 0; i < 5; i++) { list[i * 5 + 0] = col_b[i]; list[i * 5 + 1] = col_i[i]; list[i * 5 + 2] = col_n[i]; list[i * 5 + 3] = col_g[i]; list[i * 5 + 4] = col_o[i]; } // 中心はfreeで固定 list[12] = 'free'; return list; }; // カード作成関数 var create_card = function () { // 取ってきた数字が入ったtableをhtmlに出力する var table = make_table(); for (var i = 0; i < table.length; i++) { $('#bi' + i).text(table[i]); } }; // 初期化関数 var init = function () { create_card(); // チェック状態を外す $('#bingo td').each(function () { $(this).removeClass('check'); }); }; // 初期 init(); // カード作成 ボタンをクリックすると、初期化 $('#bingo-create').click(function () { init(); }); // 番号をクリックすると、スタイルを変更するクラスをつけ外しできる $('#bingo td').click(function (){ $(this).toggleClass('check'); }); // 抽選ボタンをクリックすると、ランダム数1個を作成 $('#lottery').click(function () { // ランダムで1-75までの値を取得 var b = parseInt(Math.random() * 75); //比較する関数 let passValue = table.find(element => element === b); console.log(passValue); }); });

イメージ説明

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。