座席をランダムに決めたい

前提・実現したいこと

はじめまして！未経験者です。
ワークショップの参加者席をランダムに決めたいと試行錯誤していましたが解決したく登録しました。

参加者48名で　12卓　に分けたいと考えています。
ブラウザで来場者にボタンをクリックしてもらい、「A〜L」と表示が一つ出ることで自分の卓を確認してもらう感じです。
各卓4名で一人ずつ来場ごとにどんどん席が埋まっていく仕組みにしたいです（重複をさける）

javascriptを使い、各卓4名なので、A1,A2,A3,A4という感じでランダムに取り出すというのをインターネットで調べて見よう見まねでやってみたのですが、全部出てきてしまいます。一つだけ取り出してもう一度ボタンを押すと同じ座席が出ないように、というプログラムはどのようにしたらよろしいでしょうか。

ご教授お願いいたします。

javascript
1<!DOCTYPE html>
2<html lang="ja">
3    <head>
4        <title>ワークショップ座席</title>
5    </head>
6    <body>
7        <form><input id="seki_btn" type="button" value="ボタン">
8            <span id="seki">あなたの席は</span></form>
9        <script>
10            document.getElementById( "seki_btn" ).onclick = function() {
11                
12                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"];
13                var a = arr.length;
14                while (a) {
15                    var j = Math.floor( Math.random() * a );
16                    var t = arr[--a];
17                    arr[a] = arr[j];
18                    arr[j] = t;
19                }
20                document.getElementById("seki").innerHTML = arr; 
21            }
22        </script>
23    </body>
24</html>

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

回答3件

JavaScript
1document.getElementById("seki").innerHTML = arr;

でarr全部出してるのが原因ですね。

JavaScript
1                while (a) {
2                    var j = Math.floor( Math.random() * a );
3                    var t = arr[--a];
4                    arr[a] = arr[j];
5                    arr[j] = t;
6                }

ここでarrの中身をランダムにしてるのであとは

JavaScript
1<script>
2var idx = 0;
3// ・・・略
4document.getElementById("seki").innerHTML = arr[idx++];

でできるかと(配列要素数オーバーしたときは考慮してないです)

投稿2019/01/24 09:31

rururu3

総合スコア5545

fjmrtkc

2019/01/24 11:47

なりました！ありがとうございます！！二行を変更しただけで解決なるなんて・・・勉強します！ありがとうございました！！

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

全部出てきてしまいます。

あら、問題はここなのね。
なら変更後の座席表は予め作っておいて、ボタンを押したら1個取り出して表示という仕組みにすると良いでしょう。
無名関数で包んでおいた方がよいかな？

JavaScript
1(function(){
2  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"];
3  var a = arr.length;
4  while (a) {
5    var j = Math.floor( Math.random() * a );
6    var t = arr[--a];
7    arr[a] = arr[j];
8    arr[j] = t;
9  }
10
11  document.getElementById( "seki_btn" ).onclick = function() {
12    document.getElementById("seki").innerHTML = arr.shift();
13  }
14})();

原理としては、配列の.shiftメソッドを実行すると
前の方から取り出されて配列が短くなっているのが確認できます。

JavaScript
1var arr = [1, 2, 3, 4, 5];
2
3console.log(arr.shift()); // 1
4console.log(arr); // [2, 3, 4, 5]
5
6console.log(arr.shift()); // 2
7console.log(arr); // [3, 4, 5]
8
9console.log(arr.shift()); // 3
10console.log(arr); // [4, 5]
11
12console.log(arr.shift()); // 4
13console.log(arr); // [5]
14
15console.log(arr.shift()); // 5
16console.log(arr); // []

まぁ、48人がマウスをポチポチやって座席を決めるんじゃなくて、
テーブル形式でババーンってやったほうが200倍くらい速く座席決まって良いと思います。

ちょっとwhile使うのは怖いので座席の並び順アルゴリズムも検討
Array.prototype.sortでランダムに並びかえてしまえばええやんというアプローチでちょっと探してみました。
JavaScriptで配列をシャッフルする方法 - Qiita

調べれば出てくるもんですね。
これをちょっと拝借して…

まずは作戦

配列と同じキーの順番リストを作る
それ通りに配列の並びを変えてしまう

JavaScript
1var 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"];
2
3var positionList = {};
4for (var i = 0; i < arr.length; i++) {
5  var position = arr[i];
6  positionList[position] = Math.random();
7}
8console.log(positionList);
9// {
10//   A1: 0.825037143210618
11//   A2: 0.4339829929662662
12//   A3: 0.10954554386139725
13//   ... 以下省略
14// }
15
16arr.sort(function(a, b){ return positionList[a] - positionList[b] });
17cosnole.log(arr);
18// ["F2", "K2", "I4", "D2", "D3", "A3", "H1", "L2", "B3", "H4", "J4", "G1", "C1", "C4", "B2", "K4", "H3", "I2", "D1", "B1", "K1", "G4", "D4", "A2", "L4", "K3", "G3", "E2", "C2", "F4", "J2", "A4", "I1", "C3", "E3", "B4", "L1", "F3", "J1", "J3", "E4", "I3", "A1", "L3", "G2", "H2", "E1", "F1"]

ざっとこんなもんですね。

投稿2019/01/24 09:26

編集2019/01/24 09:43

miyabi-sun

総合スコア21158

fjmrtkc

2019/01/24 11:51

回答ありがとうございました！一斉にみんな会場にいたら「はいドン！」ってやると一瞬でわーっとなりそうですよね、テーブルとか組んでいけば、ただ、今回は一人ひとり会場に入る時にーってその時に紙に書いたクジを引かせようか、と思いましたが、新しいことをしたいなーと考えチャレンジを進めて挫傷した、という感じです^^;回答いただいた内容もすぐには理解できないかも知れませんが、習得して使えるようになりたいとおもいます！早急な回答本当にありがとうございました！

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

ベストアンサー

こんなかんじ

javascript
1<script>
2var seat=4;
3var members=48;
4var arr=Array(members).fill(null).map((x,y)=>[String.fromCharCode((y-y%seat)/seat+65)+(y%seat+1).toString(),Math.random()]);
5arr.sort((x,y)=>x[1]-y[1]);
6window.addEventListener('DOMContentLoaded', e=>{
7  document.querySelector('#seki_btn').addEventListener('click',e=>{
8    document.querySelector('#seki').textContent=(arr.length?arr.shift()[0]:"終了");
9  });
10});
11</script>
12<input id="seki_btn" type="button" value="ボタン">
13あなたの席は<span id="seki"></span>