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

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

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

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

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="utf-8">
5<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">  
6<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
7
8<style>
9/* カード全体のスタイル */
10#bingo{
11    width: 340px;
12    margin: 0 auto;
13}
14
15/* B I N G Oと番号のスタイル */
16#bingo th,
17#bingo td {
18    text-align: center;
19    font-weight: normal;
20}
21
22/* B I N G O の文字のスタイル */
23#bingo th{
24    color: #B78D4A;
25}
26
27/* 番号のスタイルを設定 */
28#bingo td {
29    width: 60px;
30    height: 55px;
31    text-align: center;
32    vertical-align: middle;
33    
34    border-radius: 1.5rem 1.5rem 0 0;
35    color: #fff;
36    background-color: #B78D4A;
37    border: 2px solid #B78D4A;
38}
39
40/* 番号をチェックした時に変更するクラス、スタイルを設定 */
41#bingo td.check {
42    color: #B78D4A;
43    background-color: #F0F0F0;
44}
45
46/* 番号をマウスオーバーした時にポインタを指矢印に変更 */
47#bingo td:hover {
48    cursor: pointer;
49    cursor: hand;
50}
51
52/* 作成ボタンのスタイル */
53p#button{
54    text-align: center;
55}
56
57/* 抽選ボタンのスタイル */
58p#button2{
59    text-align: center;
60}
61</style>
62
63</head>
64<body>
65<div>
66    <table id="bingo" cellspacing="10">
67        <tbody>
68            <tr>
69                <th>B</th>
70                <th>I</th>
71                <th>N</th>
72                <th>G</th>
73                <th>O</th>
74            </tr>
75            <tr>
76                <td id="bi0"></td>
77                <td id="bi1"></td>
78                <td id="bi2"></td>
79                <td id="bi3"></td>
80                <td id="bi4"></td>
81            </tr>
82            <tr>
83                <td id="bi5"></td>
84                <td id="bi6"></td>
85                <td id="bi7"></td>
86                <td id="bi8"></td>
87                <td id="bi9"></td>
88            </tr>
89            <tr>
90                <td id="bi10"></td>
91                <td id="bi11"></td>
92                <td id="bi12"></td>
93                <td id="bi13"></td>
94                <td id="bi14"></td>
95            </tr>
96            <tr>
97                <td id="bi15"></td>
98                <td id="bi16"></td>
99                <td id="bi17"></td>
100                <td id="bi18"></td>
101                <td id="bi19"></td>
102            </tr>
103            <tr>
104                <td id="bi20"></td>
105                <td id="bi21"></td>
106                <td id="bi22"></td>
107                <td id="bi23"></td>
108                <td id="bi24"></td>
109            </tr>
110        </tbody>
111    </table>
112    <p id="button"><input type="button" value="カード作成" id="bingo-create"></p>
113    <p id="button2"><input type="button" value="抽選" id="lottery"></p>
114</div>   
115
116</body>
117<script src="20220709ex.js"></script>
118</html>

javascript
1'use strict'
2
3$(function () {
4    var make_col = function (base) {
5        var arr = [];
6        for(var i=0; i<15; i++) {
7            arr.push(i);
8        }
9        var list = [];
10        for (var i = 1; i <= 5; i++) {
11            // ランダムで値を取得
12            var a = parseInt(Math.random() * arr.length);
13            list.push(arr[a] + base);
14            // 数字を重複させないため、元々のリストから値を削除する
15            arr.splice(a, 1);
16        }
17        return list;
18    };
19
20    var make_table = function () {
21        // B列、I列...とそれぞれで5つの数字をランダムで取得
22        var col_b = make_col(1);
23        var col_i = make_col(16);
24        var col_n = make_col(31);
25        var col_g = make_col(46);
26        var col_o = make_col(61);
27        
28        // 25個分の数字を格納できるtableに取ってきた列の数字を設定
29        var list = new Array(25);
30        for (var i = 0; i < 5; i++) {
31            list[i * 5 + 0] = col_b[i];
32            list[i * 5 + 1] = col_i[i];
33            list[i * 5 + 2] = col_n[i];
34            list[i * 5 + 3] = col_g[i];
35            list[i * 5 + 4] = col_o[i];
36        }
37        // 中心はfreeで固定
38        list[12] = 'free';
39        return list;
40    };
41    
42    // カード作成関数
43    var create_card = function () {
44        // 取ってきた数字が入ったtableをhtmlに出力する
45        var table = make_table();
46        for (var i = 0; i < table.length; i++) {
47            $('#bi' + i).text(table[i]);
48        }
49    };
50
51    // 初期化関数
52    var init = function () {
53        create_card();
54        
55        // チェック状態を外す
56        $('#bingo td').each(function () {
57            $(this).removeClass('check');
58        });
59    };
60    
61    // 初期
62    init();
63    
64    // カード作成 ボタンをクリックすると、初期化
65    $('#bingo-create').click(function () {
66        init();
67    });
68    
69    // 番号をクリックすると、スタイルを変更するクラスをつけ外しできる
70    $('#bingo td').click(function (){
71        $(this).toggleClass('check');
72    });
73
74    // 抽選ボタンをクリックすると、ランダム数1個を作成
75    $('#lottery').click(function () {
76        // ランダムで1-75までの値を取得
77        var b = parseInt(Math.random() * 75);
78
79        //比較する関数
80        let passValue = table.find(element => element === b);
81        console.log(passValue);
82    });
83});

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

回答3件

ベストアンサー

javascript
1// カード作成関数
2var create_card = function () {
3  // 取ってきた数字が入ったtableをhtmlに出力する
4  var table = make_table();
5  for (var i = 0; i < table.length; i++) {
6    $('#bi' + i).text(table[i]);
7  }
8};
9
10// ...中略...
11
12// 抽選ボタンをクリックすると、ランダム数1個を作成
13$('#lottery').click(function () {
14  // ランダムで1-75までの値を取得
15  var b = parseInt(Math.random() * 75);
16
17  //比較する関数
18  let passValue = table.find(element => element === b);
19  console.log(passValue);
20});

create_card 関数内の変数 table は、create_card 関数外から参照委できません。
変数 create_card と同じスコープに変数 table を定義すれば、スコープの問題は解消されます。

Plunker - 抽選

javascript
1var table;
2var create_card = function () {
3  // 取ってきた数字が入ったtableをhtmlに出力する
4  table = make_table();
5  for (var i = 0; i < table.length; i++) {
6    $('#bi' + i).text(table[i]);
7  }
8};

Re: DaichiNakajima さん

投稿2022/07/10 11:58

編集2022/07/10 11:59

think49

総合スコア18164

エラー変わりませんでしたか？Javascriptの場合戻り値は一個のみなので追加するとエラーが変わるように思いますが。
上記のようにJavascriptの場合戻り値は一つまでなので複数返したい場合は配列やオブジェクトにまとめる必要があります。

投稿2022/07/09 07:10

usekay

総合スコア395

nitori-kun

2022/07/09 07:46

エラーは変わりませんでした。そもそも、create_cardの当初の戻り値は、 for (var i = 0; i < table.length; i++) { $('#bi' + i).text(table[i]); } という認識であっていますか？これを配列やオブジェクトに入れるのは厳しい気がします。方法はありますか？

usekay

2022/07/09 09:02

コードを再度読み返しました。テーブルをHTMLから引っ張ってきて比較する想定なので80行目の let passValue = table.find(element => element === b); を let passValue = getElementById('bingo').find(element => element === b); に変更ですかね。

nitori-kun

2022/07/10 03:12

コード読み直していただきありがとうございます。Uncaught TypeError: document.getElementById(...).find is not a functionのエラーが出ます。少し寝かせて考えてみたいと思ったので、ここで質問は終わりにします。ありがとうございました。

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

create_card関数からtableを返すようにするかtableをグローバル変数にしてしまうかですかね。
前者のほうが一般的な手法だとは思いますが。

投稿2022/07/09 05:34

usekay

総合スコア395