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

Question

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

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

Comments

[退会済みユーザー]

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

Answer 1

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

sample

<script>
window.addEventListener('pageshow', ()=>{
  num.value=localStorage.getItem('hukuro')??'0';
});
document.addEventListener('click',e=>{
  const t=e.target.closest('#hukuro_ari,#hukuro_nasi');
  if(t){
    localStorage.setItem('hukuro',t.id=="hukuro_ari"?num.value:"0");
    location.href='next.html';
  }
});
</script>
<div class="choice">
<button id="hukuro_ari"><p>レジ袋（１枚５円）</p></button>
<button id="hukuro_nasi"><p>マイバッグまたは袋不要</p></button>
</div>
<input id="num" type="number" value="0" min="0" max="10">

//next.html

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

Comments

[misk-ugok]

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

[yambejp]

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

[misk-ugok]

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

[yambejp]

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

[misk-ugok]

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

[yambejp]

どうも噛み合ってないようなので

(1)あるページでボタンを押す
(2)次のページのカウントが増える
→もう次のページなのでボタンを押すことはできない

という流れだと思うのですが、想定している仕組みを説明してください

[misk-ugok]

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