皆さん、こんにちは。管理人です。
今回は、区別できる箱が boxNum 個、区別できる玉が ballNum 個あったときに、玉を箱に入れる方法の一覧表を作成するプログラムを JavaScript で作りました。これに関しては、ひとつの玉を箱に入れることを、boxNum 種類あるラベルのうちのひとつを貼ることとみなすことができるので、玉を箱に入れる方法の総数は ballNum ^ boxNum 通りとなります。
実際にプログラムを動かしてみよう
では、箱の数と玉の数を入力して送信ボタンをクリックしてみて下さい。
ソースコード
<form id="form1" action="#">
<label id="box-num-label">箱の数:
<input type="number" step="1" min="1" max="6" value="3" id="box-num">
</label>
<label>玉の数:
<input type="number" step="1" min="1" max="5" value="4" id="ball-num">
</label>
<input type="button" onclick="count_up()" value="送信">
</form>
<div id="output1"></div>
#box-num, #ball-num {
width: auto;
margin-right: 10px;
}
#output1 {
width: fit-content;
margin-top: 10px;
height: 250px;
overflow: auto;
}
#output1 table {
border-collapse: separate;
border-spacing: 0;
text-align: center;
}
#output1 table td, #output1 table th {
padding: 2px 4px;
border-right: solid 1px black;
border-bottom: solid 1px black;
}
#output1 table th {
border-top: solid 1px black;
position: sticky;
top: 0;
background-color: violet;
}
#output1 table tr td:first-child {
text-align: right;
background-color: aquamarine;
}
#output1 table th:first-child,
#output1 table td:first-child {
border-left: solid 1px black;
}
const box = ['A', 'B', 'C', 'D', 'E', 'F', 'G']; // 箱の種類を表す配列
let boxNum; // 箱の数
let ballNum; // ボールの数
let ball; // 配列であり、i 番目の玉は ball[i] という箱に入るとする
let output; // 一覧表となるもの
let id; // 番号
function next(remain) { // remain はまだ箱に入れていないボールの数
if (remain === 0) { // remain が 0 になった場合、すべてのボールが箱に入った(ラベリングが終わった)ことを意味する
id++;
// 表に書き出す
output += ('<tr><td>' + id + '</td>');
for (let i = 0; i < ballNum; i++) {
output += ('<td>箱' + ball[i] + '</td>');
}
output += '</tr>';
} else {
for (let i = 0; i < boxNum; i++) {
ball[ballNum - remain] = box[i]; // ballNum - remain (+ 1) 番目のボールは box[i] に入れる
remain--; // 箱に入っていない(ラベリングしていない)ボールがひとつ減る
next(remain);
remain++;
}
}
}
const count_up = () => {
// 初期化
id = 0;
ball = new Array(ballNum);
// フォームからボールの数と箱の数を受け取る
ballNum = Number(document.getElementById("ball-num").value);
boxNum = Number(document.getElementById("box-num").value);
// 表のヘッダー部分
output = '<table><thead><tr><th>id</th>';
for (let i = 1; i <= ballNum; i++) {
output += ('<th>' + i + '番目の玉</th>');
}
output += '</tr></thead><tbody>';
next(ballNum); // 数え上げ
output += '</tbody></table>';
document.getElementById("output1").innerHTML = output; // 表を出力する
}
注意
このプログラムを WordPress に実装しようとしたところ、なぜか JavaScript の count_up の部分がコメントアウトされていて表を生成することができなかったのですが、コメントを削除した上で実装したところうまく表が生成されるようになりました。なので、このプログラムを WordPress に実装する際は注意して下さい。
コメント