Javascriptでページ間の変数の受け渡しができない。

Javascriptで、問題を出題できるページを作成しております。

【構成】
・1ページ：問題出題に関する説明と「スタート」ボタン
・2-4ページ：4択問題を出題「次へ」ボタンで次のページへ
・5ページ：正解数と正解率を出力

【作成時の問題点】
・Javascriptでページ間での変数の受け渡しがうまくできず、5ページ目で正解数と正解率を出力することができません。

どうすれば、5ページ目で正解数と正解率を表示させることができますでしょうか？

具体的なコードも教えていただければ幸いです。

kei344

2017/07/11 05:54

ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。

mattn

2017/07/11 05:56

一般的にこういった物を作る場合、JavaScript だけでは作らずサーバ処理という物を作りますがそれはご存じでしょうか。

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

回答4件

ページの遷移は絶対なのでしょうか？
同じページ上で遷移しているかのように振る舞えば
データは引き継がれます。

遷移が必須条件であれば、GETのパラメータやクッキーで保持するのが妥当。
もちろんサーバーサイドのプログラムがつかえるなら
セッションを利用すれば値は引き継げます

投稿2017/07/11 06:01

yambejp

総合スコア114839

URLSearchParams

URLSearchParams の勉強目的で作りました。

最も、他の方が指摘されるように、ページ遷移を伴わない実装にする方がエレガントだと思います。

Re: takepo さん

投稿2017/07/12 11:40

think49

総合スコア18164

同じウィンドウ内で遷移するのであれば、
sessionStorage または localStorage を使うのはいかがでしょうか？
Cookie よりも使える容量が大きいですし、

※ sessionStorage: ウィンドウ/タブにのみデータが保持(閉じればデータ破棄)されますので、今回の要求に合っているように見えます。

※ sessionStorage を使う場合、同じウィンドウで遷移するようにしておく必要があります。

大まかな流れ

遷移する直前にデータ保存

sessionStorage.setItem
2. 遷移直後 (画面ロード時など)にデータ取得して画面に反映させる
sessionStorage.getItem

※ ちなみに、保存するデータの構造については、以下のメソッドが参考になると思います。
JSON.stringify
JSON.parse

投稿2017/07/11 09:02

KoichiAkamine

総合スコア30

URLを参照されたり直接編集すると
回答を操作できてしまいますがそれでもよければ

次へボタン押下時のイベントで
２ページ目は
window.location.href = "遷移先URL" + 解答１
３ページ目は
var 解答１ = 自分のURLから解答１を切り取る
window.location.href = "遷移先URL" + 解答１ + 解答２
４ページ目は
var 解答１ = 自分のURLから解答１を切り取る
var 解答２ = 自分のURLから解答２を切り取る
window.location.href = "自分のURL" + 解答１ + 解答２ + 解答３
５ページ目の画面ロード時イベントで
var 解答１ = 自分のURLから解答１を切り取る
var 解答２ = 自分のURLから解答２を切り取る
var 解答３ = 自分のURLから解答３を切り取る
採点処理
結果を表示

これならJavaScriptのみで処理可能です

以下追記

JavaScript
1// ２ページ目の次へボタンクリック処理
2function page2NextClick() {
3    var ans1 = 画面部品から答えを取得;
4    window.location.href = "page3.html?" + ans1
5}
6// ３ページ目の次へボタンクリック処理
7function page3NextClick() {
8    var ans1 = location.search.substring(1);
9    var ans2 = 画面部品から答えを取得;
10    window.location.href = "page4.html?" + ans1 + "," + ans2;
11}
12// ４ページ目の次へボタンクリック処理
13function page4NextClick() {
14    var ans12 = location.search.substring(1);
15    var ans1 = ans12.split(",")[0];
16    var ans2 = ans12.split(",")[1];
17    var ans3 = 画面部品から答えを取得;
18    window.location.href = "page5.html?" + ans1 + "," + ans2 + "," + ans3;
19}
20// ５ページ目の画面ロード時処理
21function page5Onload() {
22    var ans123 = location.search.substring(1);
23    var ans1 = ans123.split(",")[0];
24    var ans2 = ans123.split(",")[1];
25    var ans3 = ans123.split(",")[2];
26    // 採点処理
27}

location.searchで現在のURLの?以下を取得できます
※http://hogehoge/hoge.html?aaaの場合 ?aaaが取得
substringで文字列を切り取ります
解答が２つ以上の場合URLへ?answer1,answer2,answer3
と「,]で連結し
splitで分割になります

投稿2017/07/11 09:36

編集2017/07/12 06:52