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

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

ただいまの
回答率

88.92%

javascript(jQuery)を使って、htmlで減算する人数制限表示を作りたい

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 1,608

ttaison

score 19

ただいま以下のような要素で、人数制限をカウント減算するプログラムを作っているのですが、ページロードする度、数字が初期値に戻ってしまい苦戦しています。

<p class="remainder">本日は残り<span id="remainder">15</span>名まで</p>
<a id="submitBtn">クリック</a>

<script><!-- footer下部に記載 -->
var limit = 15;
$('#submitBtn').click(function(){
    if(limit >= 2){
        limit--;
        document.getElementById('remainder').innerHTML = limit;
    };
});
</script>


a要素のクリックボタンを押していくと1ずつ数字が減っていき、最終的に1名で止まるようになったのですが、ブラウザをリロードすると数字が変数の初期値に戻ってしまいます。
そのためscript部分を以下のように書き換えましたが、まったく動作してくれません。

<script><!-- footer下部に記載 -->
var limit = document.getElementById('remainder');
$('#submitBtn').click(function(){
    var limitNum = Number(limit);
    if(limitNum >= 2){
        limitNum - 1;
        document.getElementById('remainder').innerHTML = limitNum;
    };
});
</script>


現在の環境はWordpress 4.7.5
jquery 1.12.4
テーマはXeory extension 0.2.1を使用しております。
記法が分からず手探りでやっております。ご指摘いただける部分があればよろしくお願い致します。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

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

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

+4

リロードする、ということは、HTMLの読み込みを最初からやり直すことになるので、HTML上に保持し続けることはできません

値を保持する方法にはcookieや、secondさんの示されたようにローカルストレージを使う方法などがあります

ただし、ある人のPCのブラウザで変化した値を別の人のPCのブラウザに渡すことはできません

「本日は残り~名まで」という文言から察するに、そのカウントダウン値は不特定多数の人へ知らせることを想定されていますか?
もしそうであるなら、それを実現したい場合はサーバ側で値を受け取ってDBに格納し、ページ表示時にDBから値を読み取ってページに埋め込むような仕組みが必要になります

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

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

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

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/05/17 16:26 編集

    おっしゃるとおりで、不特定多数のユーザーを想定しています。
    そうなるとデータベースも織り交ぜた形で内容を考えていく必要がありそうですね。
    もう少しデータ保持について調べてみようかと思います。
    ありがとうございます!

    キャンセル

+2

javascriptの変数やdomの情報はページを離れても保持されるものではありません。

そのため、データベースやユーザーのブラウザに保存するようにしなければなりません。

LocalStorageを使うと、簡単に実装することはできます。

https://developer.mozilla.org/ja/docs/Web/API/Window/localStorage

localStorage.setItem('counter', limitNum);// 保存
limitNum = localStorage.getItem('counter');// 取得

こんな感じです。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

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

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

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/05/17 15:34

    LocalStorageでは「回数制限」は出来ますが「人数制限」は出来ないと思いますよ。

    キャンセル

  • 2017/05/17 15:40

    確かにそうですね。
    または「クリックボタンを押していくと1ずつ数字が減っていき」と書いていることから、それは許容する仕様なのかもしれません。

    キャンセル

  • 2017/05/17 16:21

    こんなものがあったのですね。ありがとうございます。
    今回の仕様としては、問い合わせの送信ボタンをイベント発火装置にして、表示される数字の切り替えができれば。と思ったのですが、、、
    データの保持を考えるといろいろと複雑になりそうですね 汗

    キャンセル

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

  • ただいまの回答率 88.92%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

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