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

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

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

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

HTML

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

解決済

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

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

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

HTML

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

2回答

0評価

0クリップ

367閲覧

投稿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

<!DOCTYPE html> <html lang="ja"> <html> <head> <meta charset="utf-8"> <title>expand1-test</title> expand1-test<br> (ax+b)(cy+d)=acxy+adx+bcy+bd<br> </head> <body> a,cの範囲 : <span id="span1">lmin </span> ≦a(c)≦ <span id="span2">lmax</span><br> lmin=<input type="number" id="lmin" value="1" /> <input type="button" value="確定" onclick="disp1()" /> <br> lmax=<input type="number" id="lmax" value="1" /> <input type="button" value="確定" onclick="disp2()" /> <br> b,dの範囲 : <span id="span3">nmin </span> ≦b(d)≦ <span id="span4">nmax</span><br> nmin=<input type="number" id="nmin" value="-10" /> <input type="button" value="確定" onclick="disp3()" /> <br> nmax=<input type="number" id="nmax" value="10" /> <input type="button" value="確定" onclick="disp4()" /> <br> 問題数指定: <span id="span5">_</span><br> 問題数=<input type="number" id="m" value="10" /> <input type="button" value="確定" onclick="disp5()" /> <br> <div> <button type="submit" onclick="conf()">実行</button> <br> <!--<button type="button" onclick="history.back()">戻る</button>=--> </div> <script>//表示 function disp1() { const lmin = document.getElementById("lmin"); document.getElementById("span1").textContent = lmin.value; } function disp2() { const lmax = document.getElementById("lmax"); document.getElementById("span2").textContent = lmax.value; } function disp3() { const nmin = document.getElementById("nmin"); document.getElementById("span3").textContent = nmin.value; } function disp4() { const nmax = document.getElementById("nmax"); document.getElementById("span4").textContent = nmax.value; } function disp5() { const nmax = document.getElementById("m"); document.getElementById("span5").textContent = m.value; } </script> <script>//定義・実行 function conf() { var lmin = document.getElementById("lmin"); var lmax = document.getElementById("lmax"); var nmin = document.getElementById("nmin"); var nmax = document.getElementById("nmax"); var m = document.getElementById("m"); ex1(lmin.value, lmax.value, nmin.value, nmax.value, m.value); } </script> <script> function ex1(lmin, lmax, nmin, nmax, m) { document.write('expand1[(ax+b)(cy+d)=acxy+adx+bcy+bd]<br><br>'); var a, b, c, d; var count = 0; for (count = 0; count < m; count++) { while (true) { a = getRandomIntInclusive(lmin, lmax); b = getRandomIntInclusive(nmin, nmax); c = getRandomIntInclusive(lmin, lmax); d = getRandomIntInclusive(nmin, nmax); if (a != 0 && b != 0 && c != 0 && d != 0) break; } var e = a * c; var f = a * d; var g = b * c; var h = b * d; //document.write("・a=" + a + ",b=" + b + ",c=" + c + ",d=" + d + "<br>"); //問題 document.write('<input type= "checkbox" name="test" id="num" checked>' + "[" + (count + 1) + "]([" + a + "]x+[" + b + "])([" + c + "]x+[" + d + "])<br>"); } return; } </script> <script> function getRandomIntInclusive(min, max) { min = Math.ceil(min); max = Math.floor(max); return Math.floor(Math.random() * (max - min + 1) + min); //The maximum is inclusive and the minimum is inclusive } </script> </body> </html>

試したこと

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

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

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

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

hoshi-takanori

2021/12/31 08:28

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

退会済みユーザー

2021/12/31 08:34

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

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

JavaScript

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

HTML

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