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

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回答

3252閲覧

カウント(ポチポチ)を途中から再開する

Gla

総合スコア12

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グッド

1クリップ

投稿2015/12/02 13:21

ローカルストレージを用いて、
カウント(ポチポチ)みたいなものをjQueryで作っています。

  • 上限をキーボード入力する
  • プラス、マイナスボタンでカウントを増減させる
  • ブラウザを閉じて開きなおしたり、リロードしても途中からカウントが再開される
  • (リセットボタンでリセット)

上限の入力とボタンの操作はできたのですが、途中から再開させるということができません。
ローカルストレージに保存はされているのですが、リロード等をするとカウントが1から始まります。

どういうふうに書けばうまくできるのでしょうか?

ローカルストレージに保存はされていますので、リロード等したときのカウント表示は途中のが表示されます。
(増減ボタンを押すと1になりますが・・・)
(リセットボタンは、カウントでつまずいているのでついていませんが最終的にはつけます。)

HTML

1<div> 2 上限:<input class="text" id="classes" type="text" /> 3 <span id="ok"><input type="button" value="決定" id="decisionbtn"></span> 4</div> 5<input type="button" value="+" id="mon1"/>:<input type="button" value="-" id="re_mon1"/> 6<div class="count" id="count_mon1">0回</div>

JavaScript

1var click_count_mon1 = 0; 2$(function(){ 3 //ローカルストレージに内容が保存されていれば呼び出し 4 if(localStorage.getItem('key_upperlimit')) { 5 $('#classes').val(localStorage.getItem('key_upperlimit')); 6 var upperlimit = $("input[id='classes']").val(); 7 } 8 //ローカルストレージに内容が保存されていれば呼び出し 9 if(localStorage.getItem('key_count')) { 10 $("#count_mon1").text(localStorage.getItem('key_count') + "回"); 11 count_mon1 = $("input[id='count_mon1']" ).text(); 12 } 13 $("#decisionbtn").click(function(){ 14 //保存 15 localStorage.setItem("key_upperlimit", $('#classes').val()); 16 location.reload(); 17 18 }); 19 //プラスボタンボタンの処理 20 $("#mon1").click(function(){ 21 if(click_count_mon1 >= 0 && click_count_mon1 < upperlimit) { 22 click_count_mon1++; 23 //ローカルストレージに保存 24 localStorage.setItem("key_count", click_count_mon1); 25 } 26 //ローカルストレージに内容が保存されていれば呼び出し 27 if(localStorage.getItem('key_count')) { 28 $("#count_mon1").text(localStorage.getItem('key_count') + "回"); 29 count_mon1 = $("input[id='count_mon1']" ).text(); 30 } 31 }); 32 33 //マイナスボタンの処理 34 $("#re_mon1").click(function(){ 35 if(click_count_mon1 > 0 && click_count_mon1 <= upperlimit){ 36 click_count_mon1--; 37 localStorage.setItem("key_count", click_count_mon1); 38 } 39 if(localStorage.getItem('key_count')) { 40 $("#count_mon1").text(localStorage.getItem('key_count') + "回"); 41 count_mon1 = $("input[id='count_mon1']" ).text(); 42 } 43 }); 44});

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

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

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

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

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

guest

回答2

0

画面を閉じる、画面をリロードする、フォームをポストする、などのイベントがあります。
onBeforeUnload
これで閉じる、サブミットされた時の最新の画面状態を保存できますね。
0. onload イベントで、class が登録されてるとき、その値をテキスト入力にセットする。
0. onload イベントで、class が未登録のとき、class を0で初期化する
0. リセットボタンが押されたら、ストレージの class に 0をセットする
0. 画面閉じる、リロードされる、画面がリフレッシュされる、など onbeforeunload イベントが発生したとき、ストレージの class に現在の入力値で更新する。
こんな感じでいけますね

投稿2015/12/02 14:39

ipadcaron

総合スコア1693

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

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

0

ベストアンサー

グローバル変数の初期値として0が代入されています。
var click_count_mon1 = 0;

その後、リロード後にせっかく読みだした値をclick_count_mon1へ代入していないため。

ボタンクリック時には0++または0--が処理され、期待している動作に至っていないものと思われます。

しかるに、コードをよく見てみるとローカルストレージからの読み出し後にcount_mon1への値の代入が記載されていますが、おそらくこれがclick_count_mon1の誤りではと思いました。

また、そうであれば、count_mon1「click_count_mon1の誤り」への値の代入はのちに数値演算させる関係上○回という文字列ではなく、localStorage.getItem('key_count')の数値を代入すべきです。

投稿2015/12/02 13:54

blackonyx

総合スコア354

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問