JavaScriptでhistory.back()が効かない

前提・実現したいこと
JavaScriptでhistory.back()が効かない原因を知りたいです。

発生している問題・エラーメッセージ
【前のページに戻る】をクリックしても反応しないです。

該当のソースコード

javascript
1<!DOCTYPE HTML>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>三択クイズ</title>
6 </head>
7 <body>
8 <h1>クイズひな形</h1>
9 <hr>
10
11 <span id="001"></span>
12
13 <h2>問題</h2>
14 <div id="text_q"></div>
15 <h2>選択</h2>
16 <div id="text_s"></div>
17 <h2>解答</h2>
18 <div id="text_a"></div>
19
20
21 <script type="text/javascript">
22
23 //問題と解答
24 qa = new Array();
25 qa[0] = ["イルカを漢字で書くとどれ？","海豚","海牛","河豚",1];
26 qa[1] = ["クラゲを漢字で書くとどれ？","水浮","水母","水星",2];
27 qa[2] = ["カタツムリを漢字で書くとどれ？","禍牛","鍋牛","蝸牛",3];
28 qa[3] = ["バッタを漢字で書くとどれ？","飛蝗","飛蟻","飛脚",1];
29 qa[4] = ["タツノオトシゴを英語にするとどれ？","sea fish","sea horse","sea dragon",2];
30 qa[5] = ["マグロを英語にするとどれ？","funa","suna","tuna",3];
31 qa[6] = ["トンボを英語にするとどれ？","fly","dragonfly","butterfly",2];
32 qa[7] = ["ヒトデを英語にするとどれ？","starfish","starshell","starmine",1];
33 qa[8] = ["恒星の中で最も明るい星は？","デネブ","スピカ","シリウス",3];
34 qa[9] = ["惑星の中で最も重たいのはどれ？","太陽","木星","天王星",2];
35
36
37 function run(){ //randomの生成
38 for (var i = qa.length-1; i>=0; i--){
39  var rand = Math.floor(Math.random() * (i+1));
40  var temp = qa[i];
41  qa[i] = qa[rand]
42  qa[rand] = temp;
43  document.getElementById("001").innerHTML = i + "回目= " + qa;
44  quiz(qa);
45 }
46  }
47
48
49 //初期設定
50 q_sel = 3; //選択肢の数
51 setReady(qa);
52
53function setReady() {//初期設定
54 count = 0; //問題番号
55 ansers = new Array(); //解答記録
56 run(); //再テストの場合のランダムの生成
57 quiz(); //最初の問題
58 }
59function quiz() { //問題表示
60  var s, n;
61  //問題
62 document.getElementById("text_q").innerHTML = (count + 1) + "問目：" + qa[count][0];
63  //選択肢
64 s = "";
65   for (n=1;n<=q_sel;n++) {
66    s += "【<a href='javascript:anser(" + n + ")'>" + n + "：" + qa[count][n] + "</a>】";
67   }
68 document.getElementById("text_s").innerHTML = s;
69 }
70function anser(num) { //解答表示
71  var s;
72  s = (count + 1) + "問目：";
73  //答え合わせ
74 if (num == qa[count][q_sel + 1]) {
75   //正解
76  ansers[count] = "○";
77  } else {
78   ansers[count] = "×";
79  }
80  s += ansers[count] + qa[count][num];
81  document.getElementById("text_a").innerHTML = s;
82  //次の問題を表示
83 count++;
84  if (count < qa.length) {
85   quiz();
86  } else {
87   //終了
88  s = "<table border='2'><caption>成績発表</caption>";
89   //1行目
90  s += "<tr><th>問題</th>";
91   for (n=0;n<qa.length;n++) {
92    s += "<th>" + (n+1) + "</th>";
93   }
94   s += "</tr>";
95   //2行目
96  s += "<tr><th>成績</th>";
97   for (n=0;n<qa.length;n++) {
98    s += "<td>" + ansers[n] + "</td>";
99   }
100   s += "</tr>";
101   s += "</table>";
102   document.getElementById("text_q").innerHTML = s;
103   //次の選択肢
104  s = "【<a href='javascript:history.back()'>前のページに戻る</a>】";
105   s += "【<a href='javascript:setReady()'>同じ問題を最初から</a>】";
106   s += "【<a href=''>次の問題に進む</a>】";
107   document.getElementById("text_s").innerHTML = s;
108  }
109 }
110 </script>
111 </body>
112 </html>
113

自分で調べたことや試したこと
s = "【<a href='javascript:history.back()'>前のページに戻る</a>】";
returnをfalseとする
s.preventDefault()を付与する

使っているツールのバージョンなど補足情報
google cromeブラウザ

m.ts10806

2022/04/02 02:08

どういう動作を期待しているのか分かりませんが、そもそもhistoryは存在するんでしょうか

believe

2022/04/02 02:13

回答の最後のページで　「前のページに戻る】ボタンが動作してほしいです。 historyはどのように追加すればいいですか？

Lhankor_Mhy

2022/04/02 02:23

「【前のページに戻る】」を押したときに戻ってほしいページというのは、10問目とかそういうことでしょうか？だとしたら、それはページではないのでこのコードではできないですよ。

believe

2022/04/02 02:30

10問目です。 history,back()すると空っぽの入力画面が表示されてしまうのが原因でしょうか？

m.ts10806

2022/04/02 02:31

画面遷移してるわけではないのならhistoryは存在しないので使えません。要は「ブラウザバック」と同等ですから。

believe

2022/04/02 02:32

history,back()の他に前のページに戻る方法や関数はないでしょうか？

believe

2022/04/02 02:35

問題のページを別々に分けるしか方法はないのでいしょうか？

m.ts10806

2022/04/02 02:37 編集

あの、いわゆる「ページ」じゃないんですよね？画面遷移せずにhtml書き換えてるだけですから。だから「次の設問を表示する」のと同じように「現設問を非表示にして前の設問を表示する」ような機能を自前で作るしかないです。

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

回答2件

ベストアンサー

質問は下記でしたね。失礼しました。

JavaScriptでhistory.back()が効かない原因を知りたいです。

history.back()はブラウザバックと同等の機能のため、バック先がなければ機能しません。
コードからすると画面遷移せずにhtml書き換えてるだけのようです。

投稿2022/04/02 02:49

m.ts10806

総合スコア80850

こんな感じでどうでしょうか。
細かいところがおかしいですが、そこはがんばってみてください。

js
1    window.addEventListener('popstate', ({ state }) => {   // 追加
2      count = state;
3      quiz();
4    })
5    function anser(num) { //解答表示
6      history.pushState(count, null, null)                 // 追加
7      var s;
8      s = (count + 1) + "問目：";
9      //答え合わせ
10      if (num == qa[count][q_sel + 1]) {
11        //正解
12        ansers[count] = "○";
13      } else {
14
15        ansers[count] = "×";
16      }
17      s += ansers[count] + qa[count][num];
18      document.getElementById("text_a").innerHTML = s;
19      //次の問題を表示
20      count++;
21      if (count < qa.length) {
22        quiz();
23      } else {
24        history.pushState(count, null, null)              // 追加