javascriptビンゴマシン排出されていない数値の数の取得

javascript
1コード
2(function(){
3	var pingoNumber = $('#pingo-number');
4	var startButton = $('#start-button');
5	var resetButton = $('#reset-button');
6	var historiesDiv = $('#histories');
7
8	// init histories
9	var toBingoString = function(n){
10		if(n > 9) {
11			return n.toString(10);
12		} else if (n < 0) {
13			return '00';
14		} else {
15			return '0' +  n.toString(10);
16		}
17	};
18	var addHistory = function(n) {
19		historiesDiv.append('<div class="col-md-1"><p class="history-number">' + toBingoString(n) + '</p></div>');
20	};
21
22	// init number list and storage
23	var numberListAll = [];
24	var maxNumber = 75;
25	for(var num = 1; num <= maxNumber; num++) {
26		numberListAll.push(num);
27	}
28
29	var storage = localStorage;
30	var listKey = 'partybingo.numberlist';
31	var removedKey = 'partybingo.removedlist';
32	var setNumberList = function(a) {
33		storage.setItem(listKey, JSON.stringify(a));
34	};
35	var getNumberList = function() {
36		return JSON.parse(storage.getItem(listKey));
37	};
38	var setRemovedList = function(a) {
39		storage.setItem(removedKey, JSON.stringify(a));
40	};
41	var getRemovedList = function() {
42		return JSON.parse(storage.getItem(removedKey));
43	};
44	var resetLists = function() {
45		setNumberList(numberListAll.concat());
46		setRemovedList([]);
47	};
48
49	// create initial list or loadHistory
50	var loadedNumberList = getNumberList();
51	var loadedRemovedList = getRemovedList();
52	if(loadedNumberList && loadedRemovedList) {
53		for (var i = 0; i < loadedRemovedList.length; i++) {
54			addHistory(loadedRemovedList[i]);
55		}
56	} else {
57		resetLists();
58	}
59
60	// create util method
61	var getNumberRamdom = function(){
62		var numberList = getNumberList();
63		var i = Math.floor(Math.random() * numberList.length);
64		return numberList[i];
65	};
66	var removeNumberRamdom = function(){
67		var numberList = getNumberList();
68		if(numberList.length === 0) {
69			return -1;
70		}
71		var i = Math.floor(Math.random() * numberList.length);
72		var removed = numberList[i];
73		numberList.splice(i, 1);
74		setNumberList(numberList);
75		var removedList = getRemovedList();
76		removedList.push(removed);
77		setRemovedList(removedList);
78		return removed;
79	};
80
81	// init start button
82	var isStarted = false;
83	function rourletto() {
84		if(isStarted) {
85			pingoNumber.text(toBingoString(getNumberRamdom()));
86			setTimeout(rourletto, 60);
87		}
88	}
89	var stop = function(time) {
90		isStarted = false;
91		startButton.text('Start');
92		var n = removeNumberRamdom();
93		pingoNumber.text(toBingoString(n));
94		addHistory(n);
95
96	};
97	var start = function(){
98		isStarted = true;
99		startButton.text('Stop');
100
101		rourletto();
102	};
103	var startClicked = function(e){
104		if(isStarted) {
105			stop(null);
106		} else {
107			start();
108		}
109	};
110	startButton.click(startClicked); // button
111	startButton.focus();
112
113	// init reset button
114	var resetClicked = function() {
115		if (confirm('リセットしてもよろしいですか?')) {
116			resetLists();
117			pingoNumber.text('00');
118			historiesDiv.empty();
119			startButton.focus();
120		}
121	};
122	resetButton.click(resetClicked);
123
124if (loadedNumberList.length=0) {
125alert("")
126}
127})();
128
129```HTML
130コード
131```ここに言語を入力
132<!DOCTYPE html>
133<html lang="ja">
134
135<head>
136  <meta charset="utf-8">
137  <meta http-equiv="X-UA-Compatible" content="IE=edge">
138  <meta name="viewport" content="width=device-width, initial-scale=1">
139  <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
140  <title>Party Bingo!</title>
141
142  <!-- Bootstrap -->
143  <link href="asset/bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet">
144  <link rel="stylesheet" href="asset/partybingo.css">
145
146  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
147  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
148  <!--[if lt IE 9]>
149      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
150      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
151    <![endif]-->
152</head>
153
154<body>
155  <p>
156    <span id="pingo-number">00</span></p>
157    <div id="buttons">
158      <button id="start-button" class="btn btn-lg btn-default">Start</button>
159      <button id="reset-button" class="btn btn-lg btn-default">Reset</button>
160      </div>
161    <h3>Histories</h3>
162    <div id="histories" class="row histories"></div>
163
164  
165
166    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
167    <script src="asset/jquery-1.11.3.min.js "></script>
168    <!-- Include all compiled plugins (below), or include individual files as needed -->
169    <script src="asset/bootstrap-3.3.5-dist/js/bootstrap.min.js "></script>
170    <script src="asset/partybingo.js "></script>
171  </body>
172</html>

githubで取得したビンゴマシンのコードを改良して数字をすべて引ききったらalertを行うコードを作成しています。現在ビンゴの結果として排出されていない数がなくなった場合にalertさせようと考えているのですが全ての数字を引ききってもalertされません。条件をどのようにしたらalertされるようになりますか。
1

maisumakun

2021/02/13 07:39

どのようなコードを書いて、どんな事態となったのですか？

jyaou9029

2021/02/13 07:42

上記のコードに試しにif(loadedNumberList.length=0){alert(loadedNumberList.length)}を追加したところ75とalertされてしまいます

maisumakun

2021/02/13 08:05

> if(loadedNumberList.length=0){alert(loadedNumberList.length)}を追加したところ 0を「代入」するので、このifの中へは進まないかと思われます。

m.ts10806

2021/02/13 08:09

「うまくいかない」が他者に伝える情報量はゼロです。具体的に記載してください。 https://teratail.com/help/question-tips#questionTips3-4-1

m.ts10806

2021/02/13 08:09

あとインデントぐちゃぐちゃで読む気になりません。きちんとそろえてください。可能なら手動ではなくコード整形機能のあるエディタを使って。

m.ts10806

2021/02/13 08:12

あと「javascriptローカルストレージについて」というタイトルと内容が繋がりません。もっときちんと説明してください。

jyaou9029

2021/02/13 08:43

指摘の通り修正しましたが、これで問題ないでしょうか？

eneko0513

2021/02/13 08:46

htmlのソースも共有貰えませんか

eneko0513

2021/02/13 09:34 編集

同じ番号が複数回リストに入ることはあり得るんですよね //追記あ、確認したら重複分は除外されてますね、見てみます。

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

回答1件

ベストアンサー

元のやつあまり書き換えたりしないように書くならこんな感じですかねー。
maxNumberを3にした場合で、4回目を押そうとしたときにアラートでるようにしてます。
押し終わったあとに判定するとかの場合は少しロジックいじる必要がありますが、
とりあえずloadedNumberListの要素数を見てみるパターンです。
あまり良い書き方じゃないのと結果として質問主さんが書いたコードで使わなくなっている部分もあると思うのでそのあたり見てみてください。

javascript
1(function() {
2  var pingoNumber = $('#pingo-number');
3  var startButton = $('#start-button');
4  var resetButton = $('#reset-button');
5  var historiesDiv = $('#histories');
6
7  // init histories
8  var toBingoString = function(n) {
9    if (n > 9) {
10      return n.toString(10);
11    } else if (n < 0) {
12      return '00';
13    } else {
14      return '0' + n.toString(10);
15    }
16  };
17  var addHistory = function(n) {
18    historiesDiv.append('<div class="col-md-1"><p class="history-number">' + toBingoString(n) + '</p></div>');
19  };
20
21  // init number list and storage
22  var numberListAll = [];
23  var maxNumber = 3;
24  for (var num = 1; num <= maxNumber; num++) {
25    numberListAll.push(num);
26  }
27
28  var storage = localStorage;
29  var listKey = 'partybingo.numberlist';
30  var removedKey = 'partybingo.removedlist';
31  var setNumberList = function(a) {
32    storage.setItem(listKey, JSON.stringify(a));
33  };
34  var getNumberList = function() {
35    return JSON.parse(storage.getItem(listKey));
36  };
37  var setRemovedList = function(a) {
38    storage.setItem(removedKey, JSON.stringify(a));
39  };
40  var getRemovedList = function() {
41    return JSON.parse(storage.getItem(removedKey));
42  };
43  var resetLists = function() {
44    setNumberList(numberListAll.concat());
45    setRemovedList([]);
46  };
47
48  // create initial list or loadHistory
49  var loadedNumberList = getNumberList();
50  var loadedRemovedList = getRemovedList();
51  if (loadedNumberList && loadedRemovedList) {
52    for (var i = 0; i < loadedRemovedList.length; i++) {
53      addHistory(loadedRemovedList[i]);
54    }
55  } else {
56    resetLists();
57  }
58
59  // create util method
60  var getNumberRamdom = function() {
61    var numberList = getNumberList();
62    var i = Math.floor(Math.random() * numberList.length);
63    return numberList[i];
64  };
65  var removeNumberRamdom = function() {
66    var numberList = getNumberList();
67    if (numberList.length === 0) {
68      return -1;
69    }
70    var i = Math.floor(Math.random() * numberList.length);
71    var removed = numberList[i];
72    numberList.splice(i, 1);
73    setNumberList(numberList);
74    var removedList = getRemovedList();
75    removedList.push(removed);
76    setRemovedList(removedList);
77    return removed;
78  };
79
80  // init start button
81  var isStarted = false;
82
83  function rourletto() {
84    if (isStarted) {
85      pingoNumber.text(toBingoString(getNumberRamdom()));
86      setTimeout(rourletto, 60);
87    }
88  }
89  var stop = function(time) {
90    isStarted = false;
91    startButton.text('Start');
92    var n = removeNumberRamdom();
93    pingoNumber.text(toBingoString(n));
94    addHistory(n);
95  };
96  var start = function() {
97
98    if (isCompleted()) {
99      isStarted = true;
100      startButton.text('Stop');
101
102      rourletto();
103    }
104
105
106  };
107  var startClicked = function(e) {
108    if (isStarted) {
109      stop(null);
110    } else {
111      start();
112    }
113  };
114  startButton.click(startClicked); // button
115  startButton.focus();
116
117  // init reset button
118  var resetClicked = function() {
119    if (confirm('リセットしてもよろしいですか?')) {
120      resetLists();
121      pingoNumber.text('00');
122      historiesDiv.empty();
123      startButton.focus();
124    }
125  };
126  resetButton.click(resetClicked);
127
128  let firstCompleted = false;
129
130  function isCompleted() {
131    console.log(getNumberList());
132    console.log(loadedNumberList);
133    if (getNumberList().length == 0) {
134      alert('OWARI');
135      return false;
136    }
137    return true;
138  }
139})();
140