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

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

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

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

解決済

次のページから前のページに戻るとJavaScriptが初期化する

yoyosan
yoyosan

総合スコア2

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

2回答

0リアクション

2クリップ

555閲覧

投稿2022/09/22 05:21

前提

診断コンテンツの様なものを作りたいと思っています。
参考サイトは下記になります。
製品抽出系コンテンツ
実現したい完成形参考サイトは下記です。
目指している動き

・phpは使わずJavaScriptで完成を希望します。
・JavaScriptはHTML内に記述を希望します。
・cssは外部ファイルで記述します。

実現したいこと

・JavaScriptの点数が一番多いものが診断結果に表示され、結果の商品をクリックするとリンク先に行きます。
リンク先で前のページ戻るボタンをクリックすると最後に表示したものを表示するようにしたいです。
●仮に最初のページをA
●次のページをB
として
A(JavaScriptを発火して終わった後<a>クリック)
➡B(前のページに戻るボタンクリックorスマホであればフリックして戻る)
➡A(JavaScriptが発火した所で表示)
↑の様な流れを実現したいです。

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

・戻るボタンをクリックして、前のページに戻ると
JavaScriptが発火する前に戻ってしまいます。
参考サイトでは戻っていないです。(参考サイトは_blankがついていましたので、検証ツールで、消した後クリックしました。)

該当のソースコード

<!DOCTYPE html> <html> <head> <title>sample</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="css/test_style.css" type="text/css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript"> var selectArray = [-1, -1, -1, -1, -1]; var scoreObj = [ [, "tap", "duo", "t", "l", "s", "e"], ["0_0", 20, 10, 8, 15, 8, 8], ["0_1", 8, 12, 12, 20, 12, 12], ["0_2", 5, 12, 15, 5, 12, 12], ["1_0", 5, 10, 12, 20, 15, 10], ["1_1", 15, 8, 8, 20, 10, 5], ["1_2", 12, 15, 20, 20, 15, 10], ["2_0", 15, 10, 12, 20, 10, 8], ["2_1", 15, 10, 18, 10, 10, 20], ["2_2", 18, 12, 15, 20, 20, 10], ["3_0", 20, 20, 20, 15, 5, 5], ["3_1", 5, 5, 5, 10, 20, 20], ["3_2", 10, 20, 10, 10, 10, 10], ["4_0", 5, 18, 18, 18, 18, 18], ["4_1", 20, 12, 12, 18, 12, 12], ["4_2", 20, 10, 10, 10, 10, 10], ]; productData = scoreObj[0]; productData.shift(); for (let i = 1; i < scoreObj.length; i++) { var itemData = scoreObj[i]; var qID = "q" + itemData.shift(); //プロパティ名の作成 Object[qID] = itemData; //---データの設定 } function quesFunc() { var idArray = this.id.split("_"); var qID = Number(idArray[0]); var ansID = Number(idArray[1]); var selectID = selectArray[qID]; if (ansID == selectID) return; $("#" + qID + "_" + ansID).addClass("selected"); $("#" + qID + "_" + selectID).removeClass("selected"); selectArray[qID] = ansID; if (checkFunc()) { $("#searchButton").addClass("active"); } } function checkFunc() { for (var i in selectArray) { if (selectArray[i] == -1) return false; } return true; } function calcFunc() { var totalArray = [0, 0, 0, 0, 0, 0]; for (var i = 0; i < selectArray.length; i++) { propName = "q" + i + "_" + selectArray[i]; var scoreList = Object[propName]; for (var j = 0; j < totalArray.length; j++) { totalArray[j] += Number(scoreList[j]); } } var resultArray = []; for (var i in productData) { resultArray[i] = [productData[i], totalArray[i]]; } resultArray.sort(function (a, b) { return b[1] - a[1]; }); resultFunc(resultArray); } function resultFunc(resultArray) { for (var i = 1; i <= 3; i++) { var myData = resultArray[i - 1]; $("#no" + i + " .rPhoto").attr( "src", "http://www.jquerystudy.info/sample/product/images/photo_" + myData[0] + ".jpg" ); $("#no" + i + " .rName").attr( "src", "http://www.jquerystudy.info/sample/product/images/nameL_" + myData[0] + ".gif" ); $("#no" + i + " .scoreText").text(myData[1] + "点"); } $("#checker").slideUp(); $("#result").slideDown(); } $(function () { $("#result").hide(); $("ul>li").click(quesFunc); $("#checker").on("click", "#searchButton.active", calcFunc); //---結果画面から質問画面に戻る $("#returnButton").click(function () { $("#checker").slideDown(); $("#result").slideUp(); }); }); </script> </head> <body style="zoom: 1" cz-shortcut-listen="true"> <div id="main"> <div id="checker"> <div class="ques"> <img src="http://www.jquerystudy.info/sample/product/images/q_1.gif" width="740" height="25" alt="どこに設置して利用しますか?" /> <div class="quesText"> リビングで家族みんなで楽しんだり、寝室で一人で楽しむなど、スタイルに合わせて選択してください。 </div> <ul> <li id="0_0">リビング</li> <li id="0_1">書斎/仕事部屋</li> <li id="0_2">寝室</li> </ul> </div> <div class="ques"> <img src="http://www.jquerystudy.info/sample/product/images/q_2.gif" width="740" height="25" alt="何に利用しますか?" /> <div class="quesText"> 仕事で利用したり、音楽や映像を楽しんだり用途に応じて選択してください。 </div> <ul> <li id="1_0">仕事</li> <li id="1_1">映像/音楽</li> <li id="1_2">インターネット</li> </ul> </div> <div class="ques"> <img src="http://www.jquerystudy.info/sample/product/images/q_3.gif" width="740" height="25" alt="重視する特徴は?" /> <div class="quesText"> 大画面や価格の安さ、処理速度など利用目的に必要な製品の特徴を選択して下さい。 </div> <ul> <li id="2_0">画面の大きさ</li> <li id="2_1">価格の安さ</li> <li id="2_2">処理速度</li> </ul> </div> <div class="ques"> <img src="http://www.jquerystudy.info/sample/product/images/q_4.gif" width="740" height="25" alt="タッチパネルは必要ですか?" /> <div class="quesText"> Windows8の特徴でもあるタッチインターフェイスを利用するにはタッチパネルが必要です。 </div> <ul> <li id="3_0">必要</li> <li id="3_1">どちらでも良い</li> <li id="3_2">必要ない</li> </ul> </div> <div class="ques"> <img src="http://www.jquerystudy.info/sample/product/images/q_5.gif" width="740" height="25" alt="誰と利用しますか?" /> <div class="quesText"> 一人で利用するか、複数で利用するかによって必要な要素が異なります。 </div> <ul> <li id="4_0">ひとり</li> <li id="4_1">家族</li> <li id="4_2">不特定多数</li> </ul> </div> <div id="searchButton"></div> </div> <div id="result"> <div class="productL" id="no1"> <div class="profile"> <img src="http://www.jquerystudy.info/sample/product/images/no1.jpg" width="51" height="65" alt="1位" /><img class="rName" src="http://www.jquerystudy.info/sample/product/images/nameL_tap.gif" width="490" height="42" /> <img src="http://www.jquerystudy.info/sample/product/images/score.gif" width="51" height="17" alt="score" /><img class="rBar" src="http://www.jquerystudy.info/sample/product/images/bar.gif" width="300" height="17" /> <div class="scoreText">170点</div> <div class="resultText"></div> </div> <a href="https://www.sony.jp/vaio/products/VL13/" class="rLink" ><img class="rPhoto" src="http://www.jquerystudy.info/sample/product/images/photo_tap.jpg" width="184" height="129" alt="" /></a> </div> <div id="returnButton"></div> </div> </div> </body> </html>

試したこと

sessionStorageを使用しました。
下記が教えていただいたコードになります。

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>onunload test</title> <!-- ── スクリプト ── --> <script> window.addEventListener( "DOMContentLoaded", function () { //----] カウント初期化 let count = Number( sessionStorage.getItem( "num" ) ); //----] 関数:50 ミリ秒おきにカウントを +1 function loop() { document.getElementById( "num" ).textContent = count++; sessionStorage.setItem( "num", count ); setTimeout( loop, 50 ); }; //----] カウント開始 loop(); } ); </script> </head> <body cz-shortcut-listen="true"> <div id="num">2145</div> <a href="http://broadtail.jp">link</a> </body> </html>

・どうすれば今作っているものに適用させるかがわからず困っています。
・また、この方法ですとロードすると0に(最初の状態にならない)ならない、良くないです。
・参考サイトではsessionStorageが使われていないからこれが原因ではない?

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

Visual Studio Codeを使用しています。

説明長くなりました。申し訳ございません。
ご教授いただければ幸いです。
よろしくお願い致します。

以下のような質問にはリアクションをつけましょう

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

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

Cocode

2022/09/25 11:26 編集

「ページ遷移をする」+「JSはHTMLの中に書く」という条件がかなり厳しいように思います。 ①「ページ遷移をする」のであれば、JSは外部ファイルとした方がましです。 ②「HTMLの中にJSを書く」のであれば、ページ遷移をしないSPA(シングルページアプリケーション)がましです。 ②の方がまだおすすめです。そして②をすると<script>タグの中身が膨大になり、外部ファイルにしたいな…と自然に思えてくることでしょう。 ということで、1番のおすすめは「SPA」+「JSは外部ファイル」です! 質問者さんの条件はおそらくできなくはないですが、コードもアプリの処理としてもかなり複雑になり実現が難しいと思います〜〜!
yoyosan

2022/09/26 06:03

わかりました。 ありがとうございます。 まずはSPAを勉強したいと思います。

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

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

アカウントをお持ちの方は

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

ただいまの回答率
86.12%

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

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

質問する

関連した質問

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

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。