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

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

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

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

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

2回答

1417閲覧

2つの画像を選択するフォームを作成し、それをlocalStorageやsessionStorageを使用してサーバーを介せず別ページで表示させたい

tshinno0214

総合スコア13

HTML5

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

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2023/04/20 06:21

編集2023/04/21 17:15

実現したいこと

  1. チェックボックスを画像クリック型にし、10個の選択肢の中から2つを選ぶ。なお、画像は2つまでしか選べないようにし、3つ目を選択するとアラートが表示されるようにしたい。
  2. 画像を2つ選んで決定ボタンを押すと、別ページに遷移し、その画像が表示されるようにしたい。

イメージ説明

前提

サーバーを介さず、ローカル環境にて表示できるようにしたい。
javascriptに関しては知識が浅く、localStorageやsessionStorageに関しても調べながらの導入となっており無知な部分が多いです。

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

https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q12163345197
上記を参考に制作してみたのですが、ページ遷移もできず、何も表示が変わらない状況です。
実現したいことの1は想定どうりの表示ですが、2が全く表現できておりません。

該当のソースコード

index.html

1 <body> 2 <main> 3 <div class="hoge"> 4 <div class="list"> 5 <form name="selectData" action="javascript:setData()"> 6 <div class="check"> 7 <input type="checkbox" id="check-1" name="checkbox" value="男1"/> 8 <label for="check-1" class="label"> 9 <img src="https://placehold.jp/150x150.png"> 10 </label> 11 </div> 12 <div class="check"> 13 <input type="checkbox" id="check-2" name="checkbox" value="男2"/> 14 <label for="check-2" class="label"> 15 <img src="https://placehold.jp/3d4070/ffffff/150x150.png"> 16 </label> 17 </div> 18 <div class="check"> 19 <input type="checkbox" id="check-3" name="checkbox" value="男3"/> 20 <label for="check-3" class="label"> 21 <img src="https://placehold.jp/3e704d/ffffff/150x150.png"> 22 </label> 23 </div> 24 <div class="check"> 25 <input type="checkbox" id="check-4" name="checkbox" value="男4"/> 26 <label for="check-4" class="label"> 27 <img src="https://placehold.jp/5c703e/ffffff/150x150.png"> 28 </label> 29 </div> 30 <div class="check"> 31 <input type="checkbox" id="check-5" name="checkbox" value="男5"/> 32 <label for="check-5" class="label"> 33 <img src="https://placehold.jp/703e5b/ffffff/150x150.png"> 34 </label> 35 </div> 36 <div class="check"> 37 <input type="checkbox" id="check-6" name="checkbox" value="男6"/> 38 <label for="check-6" class="label"> 39 <img src="https://placehold.jp/705b3e/ffffff/150x150.png"> 40 </label> 41 </div> 42 <div class="check"> 43 <input type="checkbox" id="check-7" name="checkbox" value="男7"/> 44 <label for="check-7" class="label"> 45 <img src="https://placehold.jp/91c039/ffffff/150x150.png"> 46 </label> 47 </div> 48 <div class="check"> 49 <input type="checkbox" id="check-8" name="checkbox" value="男8"/> 50 <label for="check-8" class="label"> 51 <img src="https://placehold.jp/3942c0/ffffff/150x150.png"> 52 </label> 53 </div> 54 <div class="check"> 55 <input type="checkbox" id="check-9" name="checkbox" value="男9"/> 56 <label for="check-9" class="label"> 57 <img src="https://placehold.jp/c0bc39/ffffff/150x150.png"> 58 </label> 59 </div> 60 <div class="check"> 61 <input type="checkbox" id="check-10" name="checkbox" value="男10"/> 62 <label for="check-10" class="label"> 63 <img src="https://placehold.jp/c04e39/ffffff/150x150.png"> 64 </label> 65 </div> 66 <input type="submit" id="submit"> 67 </form> 68 </div> 69 </div> 70 </main> 71 <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> 72 <script type="text/javascript" src="js/common.js"></script> 73 <script type="text/javascript"> 74 function setData(){ 75 var item = document.selectData.item; 76 var arr = new Array(); 77 for(var i=0;i<item.length;i++){ 78 if( item[ i ].checked ){ arr.push( item[ i ].value ) } 79 } 80 sessionStorage.setItem( "key", arr.join(";") ); 81 location.href = "./pic.html"; 82 } 83 </script> 84 </body>

common.js

1function() { 2 const checkMax = 2; 3 const checkBoxes = document.getElementsByName('checkbox'); 4 5 function checkCount(target) { 6 let checkCount = 0; 7 checkBoxes.forEach(checkBox => { 8 if (checkBox.checked) { 9 checkCount++; 10 } 11 }); 12 if (checkCount > checkMax) { 13 alert('最大2つまで'); 14 target.checked = false; 15 } 16 } 17 18 checkBoxes.forEach(checkBox => { 19 checkBox.addEventListener('change', () => { 20 checkCount(checkBox); 21 }) 22 }); 23};

●遷移先

second.html

1<body> 2 <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> 3 <script type="text/javascript" src="js/common.js"></script> 4 <script type="text/javascript"> 5 $(document).ready(function() { 6 if( window.sessionStorage ){ 7 var data = sessionStorage.getItem( "key" ); 8 if( data ){ 9 //----] データを配列にする 10 var arr = data.split( ";" ); 11 //----] <body> 内にデータを <ul>-<li> で書き出し 12 var body = document.body; 13 var ul = body.appendChild( document.createElement("ul") ); 14 for(var i=0;i<arr.length;i++){ 15 var li = ul.appendChild( document.createElement("li") ); 16 li.appendChild( document.createTextNode( arr[ i ] ) ); 17 } 18 } 19 } 20 }); 21 </script> 22 </body>

調査したこと・試したこと

sessionStorageではうまく行かないのかもと思い、localStorage.setItemやlocalStorage.getItemに置き換えてみましたが変化なしでした。

こちらのページのやり方で、テキストの値保持とページ遷移はできたのですが、複数チェックボックスの値の受け渡しがわからず断念しました。
https://magazine.techacademy.jp/magazine/32448

こちらのcookie.jsを使ったやり方も試してみましたがダメでした。
https://code-base.jp/javascript%E3%81%A7checkbox%E3%81%AE%E5%80%A4%E3%82%92%E3%83%9A%E3%83%BC%E3%82%B8%E7%A7%BB%E5%8B%95%E3%81%A7%E5%BC%95%E3%81%8D%E7%B6%99%E3%81%90%E6%96%B9%E6%B3%95/

追記

tabuu様にご教示いただき、
var item = document.selectData.item;

var item = document.selectData.elements;
とすることでページ遷移とデータの受け渡し(value値)が成功しました。
理想だと、遷移先には選択した画像が表示されるようになってほしいため、受け渡しの記述を変更する必要があるのではと推測しています。
また、それが可能なのか定かではないため、ご教示いただけると幸いです。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yambejp

2023/04/20 06:31

httpで処理していますか?移動先はおなじドメインですか?
tshinno0214

2023/04/20 06:34

サーバーを介さず、ローカル環境にて表示したいため、Chromeにてローカル環境で確認作業しております。 移動先は同じ階層です。
yambejp

2023/04/20 06:44

とりあえずlocalStorageについては回答してあります。
tshinno0214

2023/04/20 06:51

localStorageについて、ありがとうございます。 私的にはhttps://magazine.techacademy.jp/magazine/32448の内容で、チェックボックスの値を配列にして、それをうまく遷移先で取得&出力できればできるのではないかと思っているのですが、何分未熟なもので四苦八苦しております。
guest

回答2

0

var item = document.selectData.item;

var item = document.selectData.elements;

ではないですか?

投稿2023/04/20 07:55

tabuu

総合スコア2449

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

tshinno0214

2023/04/20 08:04

こちらに変更したところページ遷移とデータの受け渡しができました! ありがとうございます! value値が表示されるようになりました。 理想だと、遷移先には選択した画像が表示されるようになってほしいため、受け渡しの記述を考える必要がありそうですね…
guest

0

ベストアンサー

一応localStorageはローカル環境でも有効のようです
以下調整しました。
1.html

HTML

1<script> 2document.addEventListener('change',({target})=>{ 3 const ch=[...document.querySelectorAll('[name=ch]:checked')]; 4 localStorage.setItem('ch',JSON.stringify(ch.map(x=>x.value))); 5 document.querySelectorAll('[name=ch]:not(:checked)').forEach(x=>x.disabled=ch.length>=2); 6}); 7</script> 8<label><input type="checkbox" name="ch" value="1">1</label><br> 9<label><input type="checkbox" name="ch" value="2">2</label><br> 10<label><input type="checkbox" name="ch" value="3">3</label><br> 11<label><input type="checkbox" name="ch" value="4">4</label><br> 12<label><input type="checkbox" name="ch" value="5">5</label><br> 13<label><input type="checkbox" name="ch" value="6">6</label><br> 14<label><input type="checkbox" name="ch" value="7">7</label><br> 15<label><input type="checkbox" name="ch" value="8">8</label><br> 16<a href="2.html">2</a>

2.html

HTML

1<script> 2window.addEventListener('DOMContentLoaded', ()=>{ 3 const ch=JSON.parse(localStorage.getItem('ch')); 4 console.log(ch); 5}); 6</script>

画像版

1.html

HTML

1<script> 2const ce = new CustomEvent("HTMLEvents"); 3ce.initEvent('change', true, true ); 4window.addEventListener('pageshow', ()=>{ 5document.dispatchEvent(ce); 6}); 7document.addEventListener('change',()=>{ 8 const ch=[...document.querySelectorAll('[name=ch]:checked')]; 9 localStorage.setItem('ch',JSON.stringify(ch.map(x=>x.value))); 10 document.querySelectorAll('[name=ch]:not(:checked)').forEach(x=>x.disabled=ch.length>=2); 11}); 12</script> 13<label><input type="checkbox" name="ch" value="0"><img src="https://placehold.jp/ff0000/0/100x100.png?text=1"></label> 14<label><input type="checkbox" name="ch" value="1"><img src="https://placehold.jp/00ff00/0/100x100.png?text=2"></label> 15<label><input type="checkbox" name="ch" value="2"><img src="https://placehold.jp/0000ff/0/100x100.png?text=3"></label> 16<label><input type="checkbox" name="ch" value="3"><img src="https://placehold.jp/ffff00/0/100x100.png?text=4"></label> 17<label><input type="checkbox" name="ch" value="4"><img src="https://placehold.jp/00ffff/0/100x100.png?text=5"></label> 18<label><input type="checkbox" name="ch" value="5"><img src="https://placehold.jp/ff00ff/0/100x100.png?text=6"></label> 19<label><input type="checkbox" name="ch" value="6"><img src="https://placehold.jp/ffffff/0/100x100.png?text=7"></label> 20<label><input type="checkbox" name="ch" value="7"><img src="https://placehold.jp/000000/ffffff/100x100.png?text=8"></label><br> 21<a href="2.html">2</a>

2.html

HTML

1<script> 2const url="https://placehold.jp/"; 3const imgs=[ 4"ff0000/0/100x100.png?text=1", 5"00ff00/0/100x100.png?text=2", 6"0000ff/0/100x100.png?text=3", 7"ffff00/0/100x100.png?text=4", 8"00ffff/0/100x100.png?text=5", 9"ff00ff/0/100x100.png?text=6", 10"ffffff/0/100x100.png?text=7", 11"000000/ffffff/100x100.png?text=8", 12] 13 14window.addEventListener('DOMContentLoaded', ()=>{ 15 const ch=JSON.parse(localStorage.getItem('ch')); 16 ch.forEach(x=>document.querySelector('output').appendChild(Object.assign(document.createElement('img'),{src:url+imgs[x]}))); 17}); 18</script> 19<output></output>

※転機ミス修正+微調整

投稿2023/04/20 06:42

編集2023/04/21 08:09
yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yambejp

2023/04/20 08:11

1ページで2個までしか選べないようにして 2ページめで確認する方法を例示してあります
tshinno0214

2023/04/20 08:22

ありがとうございます。 不躾な質問ですが、1.htmlは私が記載している『チェックボックスを画像として選択できる』ことを前提として考えたときに、2.htmlをコンソールログではなく画面上に画像として表示させることは可能なのでしょうか?
yambejp

2023/04/21 00:18

画像の表示の仕方がわからないのでしょうか?localStorageで遷移先にデータを引き継ぐ方法を 聞きたいのかと思っていましたが、そうなるともはや別の質問ですよね?
tshinno0214

2023/04/21 01:30

そうですね、別の質問になってしまいました、すみません。 画像版までご教示いただきありがとうございます。 大変勉強になりました。
tshinno0214

2023/04/21 06:53

別の質問ついでに申し訳ありません。 2.htmlにてsrc:url+imgs[x]が取得できずimgのsrcが空のまま出力されてしまいます。 どうすれば取得できるのでしょうか…
yambejp

2023/04/21 07:08

すみません、転記ミスがあったので修正しました ついでにちょっと微調整も入れてあるので確認してみてください
tshinno0214

2023/04/21 08:07

ありがとうございます! やってみたのですが、まだimgが空のままでした… コンソールログで確認したところ、[x is not defined]となっているのですが、これは1.htmlから取得したxの値がうまく引き継がれていないということなのでしょうか? 本当に無知で申し訳ありません。
tshinno0214

2023/04/21 08:15

ありがとうございます! 完全に解決致しました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問