回答編集履歴

1

質問文に合った形に変更

2019/01/24 09:43

投稿

miyabi-sun
miyabi-sun

スコア21158

test CHANGED
@@ -1,3 +1,105 @@
1
+ > 全部出てきてしまいます。
2
+
3
+
4
+
5
+ あら、問題はここなのね。
6
+
7
+ なら変更後の座席表は予め作っておいて、ボタンを押したら1個取り出して表示という仕組みにすると良いでしょう。
8
+
9
+ 無名関数で包んでおいた方がよいかな?
10
+
11
+
12
+
13
+ ```JavaScript
14
+
15
+ (function(){
16
+
17
+ var arr = ["A1","A2","A3","A4","B1","B2","B3","B4","C1","C2","C3","C4","D1","D2","D3","D4","E1","E2","E3","E4","F1","F2","F3","F4","G1","G2","G3","G4","H1","H2","H3","H4","I1","I2","I3","I4","J1","J2","J3","J4","K1","K2","K3","K4","L1","L2","L3","L4"];
18
+
19
+ var a = arr.length;
20
+
21
+ while (a) {
22
+
23
+ var j = Math.floor( Math.random() * a );
24
+
25
+ var t = arr[--a];
26
+
27
+ arr[a] = arr[j];
28
+
29
+ arr[j] = t;
30
+
31
+ }
32
+
33
+
34
+
35
+ document.getElementById( "seki_btn" ).onclick = function() {
36
+
37
+ document.getElementById("seki").innerHTML = arr.shift();
38
+
39
+ }
40
+
41
+ })();
42
+
43
+ ```
44
+
45
+
46
+
47
+ 原理としては、配列の.shiftメソッドを実行すると
48
+
49
+ 前の方から取り出されて配列が短くなっているのが確認できます。
50
+
51
+
52
+
53
+ ```JavaScript
54
+
55
+ var arr = [1, 2, 3, 4, 5];
56
+
57
+
58
+
59
+ console.log(arr.shift()); // 1
60
+
61
+ console.log(arr); // [2, 3, 4, 5]
62
+
63
+
64
+
65
+ console.log(arr.shift()); // 2
66
+
67
+ console.log(arr); // [3, 4, 5]
68
+
69
+
70
+
71
+ console.log(arr.shift()); // 3
72
+
73
+ console.log(arr); // [4, 5]
74
+
75
+
76
+
77
+ console.log(arr.shift()); // 4
78
+
79
+ console.log(arr); // [5]
80
+
81
+
82
+
83
+ console.log(arr.shift()); // 5
84
+
85
+ console.log(arr); // []
86
+
87
+ ```
88
+
89
+
90
+
91
+ まぁ、48人がマウスをポチポチやって座席を決めるんじゃなくて、
92
+
93
+ テーブル形式でババーンってやったほうが200倍くらい速く座席決まって良いと思います。
94
+
95
+
96
+
97
+ ---
98
+
99
+
100
+
101
+ ちょっとwhile使うのは怖いので座席の並び順アルゴリズムも検討
102
+
1
103
  [Array.prototype.sort](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)でランダムに並びかえてしまえばええやんというアプローチでちょっと探してみました。
2
104
 
3
105
  [JavaScriptで配列をシャッフルする方法 - Qiita](https://qiita.com/komaji504/items/62a0f8ea43053e90555a)
@@ -63,15 +165,3 @@
63
165
 
64
166
 
65
167
  ざっとこんなもんですね。
66
-
67
- ただまぁ、最後の画面表示の部分は未完成のようですね。
68
-
69
- `document.getElementById("seki").innerHTML = arr;`ではどうあがいても動作しません。
70
-
71
-
72
-
73
- innnerHTMLはHTML的な文字列しか受け付けないので、
74
-
75
- 座席リスト順に習ってtable>tr>tdみたいなモノを作って順序よく並べていくようなHTML文字列を構築してみてください。
76
-
77
- for文を使って行けばなんとかなると思います。