いくつかの変数の組み合わせをチェックボックスで一定数表示し、その値を選択取得する

前提・実現したいこと

html,js初心者です。申し訳ございません。よろしくお願いいたします。

乱数の範囲を設定した後、実行ボタンを押すとチェックボックス付きのものが表示されます

指定された範囲において乱数的に取得した変数a,b,c,dの組み合わせを一定数for文で画面に表示し、
それぞれにチェックボックスを設定、
チェックされた変数a,b,c,dの値を取得し、それのみ表示するボタン

の機能を実現したいです。

発生している問題・エラーメッセージ

js内で動的に作成されたチェックボックスのidやvalueにa,b,c,dを設定する方法がよくわからない。
チェックボックスから変数をを取得する方法がよくわからない。

エラーメッセージ

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3<html>
4
5<head>
6    <meta charset="utf-8">
7    <title>expand1-test</title>
8    expand1-test<br>
9    (ax+b)(cy+d)=acxy+adx+bcy+bd<br>
10
11</head>
12
13<body>
14    a,cの範囲 : <span id="span1">lmin </span> ≦a(c)≦ <span id="span2">lmax</span><br>
15    lmin=<input type="number" id="lmin" value="1" />
16    <input type="button" value="確定" onclick="disp1()" />
17    <br>
18    lmax=<input type="number" id="lmax" value="1" />
19    <input type="button" value="確定" onclick="disp2()" />
20    <br>
21    b,dの範囲 : <span id="span3">nmin </span> ≦b(d)≦ <span id="span4">nmax</span><br>
22    nmin=<input type="number" id="nmin" value="-10" />
23    <input type="button" value="確定" onclick="disp3()" />
24    <br>
25    nmax=<input type="number" id="nmax" value="10" />
26    <input type="button" value="確定" onclick="disp4()" />
27    <br>
28    問題数指定: <span id="span5">_</span>問<br>
29    問題数＝<input type="number" id="m" value="10" />
30    <input type="button" value="確定" onclick="disp5()" />
31    <br>
32    <div>
33        <button type="submit" onclick="conf()">実行</button>
34        <br>
35        <!--<button type="button" onclick="history.back()">戻る</button>=-->
36    </div>
37
38    <script>//表示
39        function disp1() {
40            const lmin = document.getElementById("lmin");
41            document.getElementById("span1").textContent = lmin.value;
42        }
43        function disp2() {
44            const lmax = document.getElementById("lmax");
45            document.getElementById("span2").textContent = lmax.value;
46        }
47        function disp3() {
48            const nmin = document.getElementById("nmin");
49            document.getElementById("span3").textContent = nmin.value;
50        }
51        function disp4() {
52            const nmax = document.getElementById("nmax");
53            document.getElementById("span4").textContent = nmax.value;
54        }
55        function disp5() {
56            const nmax = document.getElementById("m");
57            document.getElementById("span5").textContent = m.value;
58        }
59    </script>
60
61    <script>//定義・実行
62        function conf() {
63            var lmin = document.getElementById("lmin");
64            var lmax = document.getElementById("lmax");
65            var nmin = document.getElementById("nmin");
66            var nmax = document.getElementById("nmax");
67            var m = document.getElementById("m");
68            ex1(lmin.value, lmax.value, nmin.value, nmax.value, m.value);
69        }
70    </script>
71    <script>
72
73        function ex1(lmin, lmax, nmin, nmax, m) {
74
75            document.write('expand1[(ax+b)(cy+d)=acxy+adx+bcy+bd]<br><br>');
76
77            var a, b, c, d;
78
79            var count = 0;
80            for (count = 0; count < m; count++) {
81
82                while (true) {
83                    a = getRandomIntInclusive(lmin, lmax);
84                    b = getRandomIntInclusive(nmin, nmax);
85                    c = getRandomIntInclusive(lmin, lmax);
86                    d = getRandomIntInclusive(nmin, nmax);
87                    if (a != 0 && b != 0 && c != 0 && d != 0)
88                        break;
89                }
90
91                var e = a * c;
92                var f = a * d;
93                var g = b * c;
94                var h = b * d;
95
96                //document.write("・a=" + a + ",b=" + b + ",c=" + c + ",d=" + d + "<br>");
97
98                //問題
99                document.write('<input type= "checkbox" name="test" id="num" checked>' + "[" + (count + 1) + "]([" + a + "]x+[" + b + "])([" + c + "]x+[" + d + "])<br>");
100
101
102            }
103            return;
104        }
105    </script>
106
107    <script>
108        function getRandomIntInclusive(min, max) {
109            min = Math.ceil(min);
110            max = Math.floor(max);
111            return Math.floor(Math.random() * (max - min + 1) + min); //The maximum is inclusive and the minimum is inclusive
112        }
113    </script>
114</body>
115
116</html>

試したこと

色々検索、調べてみましたが解決できませんでした。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

hoshi-takanori

2021/12/31 08:28

あー、こういうことがしたかったんですね。なるほど…。で、問題の候補を 10 個生成して、そのうちのいくつかを選択して。その後どうしたいのでしょうか？ (あと、document.write すると画面の内容が書き変わってしまって元に戻れないので、いまいちでは…。)

退会済みユーザー

2021/12/31 08:34

ありがとうございます。 document.writeが不適切なのは理解しています。修正予定です。任意の問題を選択したのち、それを一覧として整えて表示した問題集(プリント的な)ものを作成しようと思っています。ランダムな値から生成された問題一覧から希望する任意の問題を選択し、それを計算プリントととして出力するプログラムを作成しています。

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

回答2件

ベストアンサー

面倒なので全部書き直しました。
解説は省きます。

js
1<!DOCTYPE html>
2<meta charset="utf-8">
3<title></title>
4<style>
5fieldset, p {margin: 1ex; }
6body.edit section:not(.edit),
7body.question section:not(.question),
8body.result section:not(.result)
9 {
10  display: none;
11}
12th { width: 5em; }
13</style>
14
15<body class="edit">
16<section class="edit">
17  <h3>変数の範囲</h3>
18  <fieldset>
19    <legend>a, c の範囲</legend>
20    <h4>
21      <output name="a">(min)</output>
22      ≦ a(c) ≦
23      <output name="c">(max)</output>
24    </h4>
25    <p>min = <input type="number" name="a" value="1">
26    <p>max = <input type="number" name="c" value="5">
27  </fieldset>
28
29  <fieldset>
30    <legend>b, d の範囲</legend>
31    <h4>
32      <output name="b">(min)</output>
33      ≦ b(d) ≦
34      <output name="d">(max)</output>
35    </h4>
36    <p>min = <input type="number" name="b" value="6">
37    <p>max = <input type="number" name="d" value="10">
38  </fieldset>
39
40  <fieldset>
41    <legend>問題数の指定</legend>
42    <p>
43      問題数 = <input type="number" name="n" value="10">
44      <button id="BTN">実行</button>
45  </fieldset>
46</section>
47
48<section class="question">
49  <h3>問題</h3>
50  <h4>Expand:（ａｘ + ｂ）（ｃｙ + ｄ）</h4>
51  <template>
52    <li>
53      <input type="checkbox" name="select" checked>
54      (<output name="a"></output>x+<output name="b"></output>)
55      (<output name="c"></output>y+<output name="d"></output>)
56    </li>
57  </template>
58  <ol></ol>
59  <button id="BTN2">変数読み出し</button>
60</section>
61
62<section class="result">
63  <h4>結果</h4>
64  <table border="1">
65    <thead><tr><th>a <th>b <th>c <th>d
66    <tbody id="TB"></tbody>
67  </table>
68<section>
69
70<script>
71document.addEventListener ('change', ({target: e}, sec, out)=> {
72  if ('INPUT' === e.nodeName)
73    if (sec = e.closest ('section'))
74      if (out = sec.querySelector (`output[name="${e.name}"]`))
75        out.value = e.value;
76}, false);
77
78
79BTN.addEventListener ('click', ()=> {
80  document.body.className = 'question';
81  createQuestion ();
82}, false);
83
84
85BTN2.addEventListener ('click', ()=> {
86  readQuestion ();
87}, false);
88
89
90function randomInt (min = 0, max = 100) {
91  return (min + Math.random () * (max - min)) |0;
92}
93
94
95function createQuestion () {
96  let
97    inp = document.querySelectorAll ('section.edit input[name]'),
98    [a, c, b, d, n] = [...inp].map (e=> parseInt (e.value, 10)),
99    fgm = document.querySelector ('section.question template'),
100    out = [...fgm.content.querySelectorAll ('output[name]')],
101    ol = document.querySelector ('section.question ol');
102
103
104  for (let i = 0; i < n; i++) {
105    [randomInt (a, c), randomInt (b, d), randomInt (a, c), randomInt (b, d)]
106      .forEach ((val, idx)=> out[idx].value = val);
107    ol.appendChild (fgm.content.cloneNode (true));
108  }  
109}
110
111
112function readQuestion () {
113  let li = document.querySelectorAll ('section.question ol li');
114  let rst = [...li].map (e=> [...e.querySelectorAll ('output')].map (e=> parseInt (e.value, 10)));
115  let rst2 = [...li]
116    .filter (e=> e.querySelector('input[type="checkbox"]').checked)
117    .map (e=> [...e.querySelectorAll ('output')].map (e=> parseInt (e.value, 10)));
118
119  document.body.className = 'result';
120  ary2tbody (rst2, TB);
121  console.log(rst);
122}
123
124function ary2tbody (ary, tb = document.createElement('tbody')) {
125  return ary.reduce((tb, a)=>(a.reduce((tr, str)=>(tr.insertCell().textContent = str, tr),tb.insertRow()), tb), tb);
126}
127</script>
128
129
130