inputタグのbuttonを押したらページの移動先に変数を渡したい

前提・実現したいこと

初めまして、よろしくおねがいします。
この度クイズを表示するサイトを作っているのですが、躓いてしまいました。

前提は
top.html(問１、問２...といった汎用ボタンが配置してあります。)
quiz.html(ここはクイズの問題を表示する場所です。quizフォルダから問題を取得します。)
quizフォルダに連番のjsファイル(クイズの問題が入ってます。)
になります。

実現したいこと
例えば
topページで問1と書かれた汎用ボタンを押す。
↓
quiz.htmlに移動し、何らかの方法で1という変数をtop.htmlから受け取る。
↓
1という変数を用い、quizフォルダの1.jsを取得しquiz.htmlでクイズを表示。

といったことを実現したいです。

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

発生している問題になりますが、
何らかの方法でtop.htmlからquiz.htmlへ、選択した問題番号を渡したいです。

該当のソースコード

どこを載せればいいかわからなかったので汎用ボタンを生成する箇所を記述します。

javascript
1var mondai_suu = 20;//汎用ボタンがこの数だけ出ます。
2var i = 0;　　　　　//whileに使うiの初期化です。
3while(mondai_suu>i){
4      i++;
5      document.write("<input type=\"button\" value=\"問"+i+"\"onClick=\"location.href='quiz.html'\">");
6}

試したこと

topページから直接飛ぶ方法も考えました。該当のソースコードのwhile文に書かれている

javascript
1　　"location.href='quiz.html'\">");

を、

javascript
1　　"location.href='"+i+".html'\">");

と記述し直し、連番のhtmlファイルの中に問題を書き込んでおき
汎用ボタンを押したら直接問題に飛べる、と思ったのですが
この場合CSSでの一括レイアウト変更のようなことができないので諦めました。

(このiという変数をtopページのwhile文の中にlocalStorage.setItem();という命令を記述し、iの中身を格納し、
quiz.htmlでlocalStorage.getItem();を使えば実現できるかな、と思ったのですが受け取った値は、ループし終えた20を
受け取っただけだったのでそうだよなあ、と....)

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

Chromeというブラウザになりますが、バージョン: 64.0.3282.186（Official Build）（64 ビット）
と書いてあります。
私自身の補足情報になりますが、1周間前に趣味でjavascriptを学び、クイズを表示するサイトを作ろうとして、調べている内にこちらのteratailというサイトを知りました。
不足している情報があれば、追記します。
よろしくおねがいします。

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

回答1件

ベストアンサー

クエリパラメータを使いましょう。たとえば、YouTubeの動画を見るページのURLはこうなっています。
https://www.youtube.com/watch?v=jNQXAC9IVRw
これは https://www.youtube.com/watch に v=jNQXAC9IVRw という値を渡しています。

これを真似して、top.htmlは

javascript
1document.write("<input type=\"button\" value=\"問"+i+"\"onClick=\"location.href='quiz.html?"+i+"'\">");

としましょう。これでquiz.html?1とかquiz.html?2のようになります。

それから、quiz.htmlに以下のコードを書きましょう。

html
1<script>
2  // URLの?から後ろの値です。たとえば、"?1" とか "?2" です。
3  var queryParameter = location.search;
4  // queryParameterの1文字目のクエスチョンマークより後ろの値: "1", "2"
5  var quizNumber = queryParameter.slice(1);
6  // 先頭に ./quiz/、末尾に .js をつけます: "./quiz/1.js", "./quiz/2.js"
7  var scriptURL = "./quiz/" + quizNumber + ".js";
8  // これで、スクリプトのURLが完成しました。
9
10  // からっぽの <script> をつくります。
11  var scriptElement = document.createElement('script');
12  // src を追加します: <script src="./quiz/1.js">, <script src="./quiz/2.js">
13  scriptElement.setAttribute('src', scriptURL);
14  // 作った <script> を <head> の中に追加します。このタイミングで、"./quiz/XXX.js" の読み込みが始まります。
15  document.head.appendChild(scriptElement);
16</script>

追記： document.write は使わない方がよいので、document.write を使わずに <script> を追加する方法に書き直しました。

投稿2018/03/17 10:08

編集2018/03/18 11:37

退会済みユーザー

総合スコア0

pzkpfw4

2018/03/18 11:13

回答ありがとうございます。汎用ボタンを押した際の番号に応じて、クエリパラメータを使った変数の取得、確認できました。大変助かりました。返信遅れてしまい申し訳ありません。１つお聞きしたいのですが、quiz.htmlに記述する document.write("<script src=\"./quiz/" + location.search.slice(1) + ".js\"></script>"); というソースコードは、htmlのどのタグの中に記述すれば良いのでしょうか？ <script>～</script>の中に記述すると、</script>が原因で、それ以降に記述してある "); が残ってしまうようです。どのタグの中に記述するのが適切でしょうか？

退会済みユーザー

2018/03/18 11:18

たしかに、おっしゃる通りです。すみません、私のミスです。修正しますので、おまちください。

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