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

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

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

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

JavaScript

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

Q&A

1回答

271閲覧

ボタンをカウントし、別ページで結果を表示したい

misk-ugok

総合スコア1

HTML5

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

JavaScript

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

0グッド

1クリップ

投稿2022/06/23 05:32

編集2022/06/24 21:35

ボタンを押すと別ページに移動し、ボタンを押したカウント数まで別ページで表示されるものを作りたいです。

レジ袋を押すと、次のページに移動し、今月のレジ袋削減枚数が増える仕組みです。
ローカルストレージで保存し、別のPCで後日新しくレジ袋のボタンを押すとさらに枚数が増えるものにしたいと考えています。
イメージ説明
イメージ説明

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

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

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

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

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

退会済みユーザー

退会済みユーザー

2022/06/23 05:40

長ーいコードを、しかも本題とは関係ない CSS まで丸投げして見てくれというのはダメです。
guest

回答1

0

レジ袋ボタンをおして次のページに飛ぶなら、最初から次のページには「1枚」と書いておけばよいだけでは?

sample

javascript

1<script> 2window.addEventListener('pageshow', ()=>{ 3 num.value=localStorage.getItem('hukuro')??'0'; 4}); 5document.addEventListener('click',e=>{ 6 const t=e.target.closest('#hukuro_ari,#hukuro_nasi'); 7 if(t){ 8 localStorage.setItem('hukuro',t.id=="hukuro_ari"?num.value:"0"); 9 location.href='next.html'; 10 } 11}); 12</script> 13<div class="choice"> 14<button id="hukuro_ari"><p>レジ袋(1枚5円)</p></button> 15<button id="hukuro_nasi"><p>マイバッグまたは袋不要</p></button> 16</div> 17<input id="num" type="number" value="0" min="0" max="10">

//next.html

javascript

1<script> 2window.addEventListener('DOMContentLoaded', ()=>{ 3 view.textContent=localStorage.getItem('hukuro'); 4}); 5</script> 6<div id="view"></div>

投稿2022/06/23 05:36

編集2022/06/23 06:02
yambejp

総合スコア114572

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

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

misk-ugok

2022/06/23 05:38

ローカルストレージで記録して、2枚、3枚とカウントアップできるようにしたいです。
yambejp

2022/06/23 05:43 編集

UIがわかりません。次のページに飛んでしまうのでインクリメントできない仕組みだと思います ボタンを押すことで増やすのではなく、セレクトボックスやinput type="number”などで ユーザーが任意に入力できる仕組みがよいのでは?
misk-ugok

2022/06/23 05:58

どうしてもボタンをカウントしたい時は、同じページにボタンを配置するしか方法はないのでしょうか?
yambejp

2022/06/23 06:03

「ボタンをカウントしたい」というのも意味がわかりません サンプル付けておいたので確認してみてください
misk-ugok

2022/06/24 03:22 編集

ボタンを押した回数を別ページで表示したいということです。言葉足らずで申し訳ございません。 ローカルストレージで2つ目のページを保存し、後でもう一度「レジ袋(1枚5円)」を押した時にさらに数字が増えるようにしたいと思っています。
yambejp

2022/06/24 03:27

どうも噛み合ってないようなので (1)あるページでボタンを押す (2)次のページのカウントが増える →もう次のページなのでボタンを押すことはできない という流れだと思うのですが、想定している仕組みを説明してください
misk-ugok

2022/06/24 12:35 編集

1ページ目を開き直した時に、2ページ目で前のデータが残っていてさらに数字が増えるようにしたいです。 質問内容を修正しましたので、そちらを見ていただけますと幸いです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問