JAVASCRIPTのクイズ結果を別のページに表示したい

JAVASCRIPTのクイズ結果を別のページに表示したいです。
現状、10問答えると別のページに飛ぶところまではいっています。
ただ、リンク先にとんだあとに正解数はX個です。と表示させたいのですがうまくいきません。リンク先のkekka.htmlのHTML内では

このようにプログラミングしています。実行結果は何も表示されません。どうすればよいのでしょうか？

JAVASCRIPT
1var qa = [
2['「テトリス（ゲーム）」を開発したのは、日本人だ。', 2],
3['生きている間は、有名な人であっても広辞苑に載ることはない。 ', 1],
4['現在、2000円札は製造を停止している。', 1],
5['パトカーは、取り締まっている最中であれば、どこでも駐車違反になることはない。', 2],
6['昆虫の中には、口で呼吸する昆虫もいる。 ', 2],
7['一般的に体の水分は、男性より女性のほうが多く含まれている。', 2],
8['たとえ１ｃｍの高さであっても、地震によって起こるのは全て「津波」である。', 1],
9['1円玉の直径は、ちょうど１ｃｍになっている。', 2],
10['塩はカロリー０である。 ', 1],
11['「小中学校は、PTAを作らなければならない」と法律で定められている。', 2]
12];
13
14var count = 0;
15var correctNum = 0;
16
17window.onload = function() {
18// 最初の問題を表示
19var question = document.getElementById('question');
20question.innerHTML = (count + 1) + '問目：' + qa[count][0];
21};
22
23// クリック時の答え判定
24function hantei(btnNo) {
25if (qa[count][1] == btnNo) {
26correctNum++;
27}
28
29if (count == 9) {
30window.location.href = 'kekka.html'; // 遷移
31}
32
33
34/* アラート表示の場合
35if (count == 9) {
36alert('あなたの正解数は' + correctNum + '問です！');
37location.reload(); //アラート後に最初に戻る
38}
39*/
40
41
42
43
44// 次の問題表示
45count++;
46var question = document.getElementById('question');
47question.innerHTML = (count + 1) + '問目：' + qa[count][0];

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

回答2件

フラグメント識別子を与えてページ遷移する方法は試しておいて良いと思います。

MDN URLとは何かの「#SomewhereInTheDocument」を説明している箇所に文字列を渡して遷移するアイディアになります。

location.href = "kekka.html#" + correctNum でページ遷移する
kekka.html 内で location.hash を参照し #number の文字列から number部分を取得する

（location.hash.substring(1)）。

単純な数値を渡す内容になりますので、MDN ページの末尾に説明される「セマンティクスURL」に反するためお勧めできませんが、「URLのフォーマットを活用したした値の渡し方」として覚えておいても良いと思います。

サーバーに問い合わせることがない。
文書中のセクションを識別する語を渡しながらページを遷移させることができる

（ページが開いてすぐに文書中の目的のセクションにジャンプするなどで応用される）。

投稿2020/10/22 09:56

編集2020/10/22 10:01

AkitoshiManabe

総合スコア5432

答えが見れてしまう構成なのと、わざわざ別ページに飛ばさなくてもいいのではと思うのですけど、
JavaScriptはあくまでクライアントサイドの言語なので、変数は別ページに引き継ぐようなことはできません（Node.jsは別でしょうけど）。
が、CookieやWeb Storageを利用すれば、クライアント側にデータを保存することができるので
引き継いだように見せることは可能です。

蛇足：
document.write()は使わないほうが良いかと思います。
HTML5でdocument.writeは使ってはいけない？

投稿2020/10/22 08:44

編集2020/10/23 10:07

m.ts10806

総合スコア80850

dvmani

2020/10/22 08:47

ありがとうございます。参考にします

dvmani

2020/10/22 10:25

すみません、COOKIESを利用してプログラミングしているのですが結果が表示されません。 js内の if (count == 9) { window.location.href = 'kekka.html'; // 通常の遷移 } の下に以下を付け加えました。 Cookies.set('name', 'correctNum'); そして、kekka.htmlのJS内に以下を付け加えました。 <script> const name = Cookies.get('name'); console.log(name); </script> また、https://github.com/js-cookie/js-cookie/blob/latest/src/js.cookie.jsを同じフォルダ内に入れました。構成としてはtestというフォルダ内にすべて直下でおいています。これら以外になにかすることはあるのでしょうか？ご教授お願い致します。

m.ts10806

2020/10/22 11:32 編集

「の下」なら画面遷移が起こってるのでsetは実行されないですよね。 console.log₍₎はコンソール出力なのでWebページ内には何も表示されませんよ。ブラウザの開発ツールのコンソールに出力されるだけです。

m.ts10806

2020/10/22 10:28

あとエラーが出てないかは必ず確認してください。

dvmani

2020/10/23 07:59

何度もすみません。アドバイスしていただいた通りに、Cookies.set('name', 'correctNum');は画面遷移の前に置き、console.logをdocument.write(name);にしました。そのうえで検証してみるとコンソール上ではエラーはでず、correctNumとブラウザに表示されました。これを正答数にしたいのですがどこが間違っているのでしょうか？

m.ts10806

2020/10/23 08:01

文章だけではなんとも。百聞は一見に如かずといいます。どんな説明するよりコードをそのまま見せるのが一番でしょう。質問本文に現在のコードを「追記」すると良いです（今のコードは上書きしないこと。回答も含めてみると解決までの流れが分からなくなる）ただ、下記はどう見ても「”correctNum”という文字列」を投入していますよね。 Cookies.set('name', 'correctNum');

dvmani

2020/10/23 08:09

そうですよね。。。ただscript.js内でalert('あなたの正解数は' + correctNum + '問です！');と書き込むと正答数がちゃんと表示されるんですよね。。。一応新しく質問と追記をしておきます。お時間がありましたら何卒よろしくお願いいたします。

m.ts10806

2020/10/23 08:12 編集

2020/10/23 17:01 の私のコメントの最後のほうの下記、読まれましたか？ ---- ただ、下記はどう見ても「”correctNum”という文字列」を投入していますよね。 Cookies.set('name', 'correctNum'); ---- ↓は「correctNumという文字列」の投入 Cookies.set('name', 'correctNum'); ↓は「correctNumという変数」の投入 Cookies.set('name', correctNum); 変数と文字列の基本部分と思います。 Cookieにセットする前の変数が想定の値かどうかはconsole.log()で確認しておいてください。

dvmani

2020/10/23 08:56

Googleクローム上で実行してみるとCookies.set("name", correctNum);でできました！ただ、ATOMのエディタ上で実行してみるとundefinedとでます。これは正常なのでしょうか？