質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

2回答

913閲覧

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

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

1クリップ

投稿2021/12/30 08:42

編集2021/12/30 08:45

前提・実現したいこと

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/ツールのバージョンなど)

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hoshi-takanori

2021/12/31 08:28

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

退会済みユーザー

2021/12/31 08:34

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

回答2

0

ベストアンサー

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

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> 22a(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> 33b(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:(ax + b)(cy + d)</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

投稿2022/01/03 15:58

編集2022/01/03 16:14
babu_babu_baboo

総合スコア616

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2022/01/03 16:04

ありがとうございます。とても助かりました。お手数をおかけして申し訳ございません。 本当にありがとうございました。 またもし機会があればよろしくお願いいたします。
guest

0

ミスゆえに削除しました。

投稿2022/01/03 16:01

編集2022/01/03 16:03
退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問