▷実現したいこと

画像に沿って説明させていただきます。
フローを説明すると右下の「参加決定」ボタンを押すと「残り60名」の部分の６０を-1して59にしたいというイメージです。
そして残りの人数が０になるまで繰り返し処理をしたいと考えています。

▷実際にやったこと

html
1<!DOCTYPE html>
2<html lang ="ja">
3<head>
4  <meta charset = "UTF-8">
5  <title></title>
6  <link rel="stylesheet" href="style.css">
7</head>
8<body>
9  <div class="top-banner">
10    <h1>
11    60名集客まで残り<span id="count">60</span>名
12    </h1>
13    <form>
14      <input type="submit" value="参加決定" name="submit" id="attend">
15    </form>
16  </div>
17  <script src= "jquery-3.4.1.min.js"></script>
18  <script src="main.js"></script>
19</body>
20</html>

送信ボタンにid属性”attend”をつけて、クリックされた時、イベントを発生させる処理を別ファイルでやっています。

js
1$(function(){
2
3  $(document).on("click","#attend",function(){
4
5    
6   });
7
8  });

この先の処理で停滞している状況です。
具体的なご解答例をいただけると幸いです。

よろしくお願いいたします。

H40831

2019/12/11 09:01

ブラウザ上のJavaScriptだけではオンラインでデータ（人数）を共有することはできませんが、今回はオフライン（ローカル）で、仰る動作を実装できればよいのでしょうか？

azuapricot

2019/12/11 09:03

submitしてるってことはサーバー側で人数管理してるんでしょうか？それならjsで計算というよりは、サーバー側で変動した後の値を画面に再表示するっていう風になるのでは？

shuntahyodo

2019/12/11 09:15

追記、修正の質問ありがとうございます！！今回は外部と接続する予定はなく、DBとも接続しない想定です。イベント発生毎（こんかいはサブミット）に数字を引いていく処理をする場合、どのように書くべきなのか分からず質問させて頂いた次第です。分かりづらく申し訳ございません。

行動規範の内容に同意します

回答3件

やり方はいろいろあると思うので、あくまで一例です。
また、しばらくjQueryに触れてないので、想定通りの動作にならなかったら教えて下さい。

まず、人数はJavaScriptで管理したいので、jQueryの実行前に

let count = 60;

とデータを持っておきます。
あとはjQuery内で

$('#attend').on("click",function(){
    if( count > 0 ){
        count-=1;
        $('#count').text(count);
    }else{
        console.log('満員御礼');
    }
});

投稿2019/12/11 09:41

編集2019/12/11 09:50

H40831

総合スコア973

H40831

2019/12/11 10:00 編集

既に終了してた

shuntahyodo

2019/12/11 12:30

ご丁寧に本当にありがとうございます！このやり方も参考にさせて頂きます！ありがとうございます！！

行動規範の内容に同意します

通常残り人数はサーバー側のDBなどで管理します。
参加決定を押すたびに、イベント（？）idに対して、ユーザーidを
紐付けていき、最大数までユーザーidを登録していく流れです。
参加決定は、submitしてもajax（fetch）してもどちらでもよいでしょう

sample

html内で完結しているのであればこんな感じ
（60回押すのが面倒なのでとりあえず最初からあと5回にしておきます）

javascript
1<script>
2$(function(){
3  $('#attend').on('click',function(e){
4    e.preventDefault();
5    var count=$('#count').text()-1;
6    if(count<0) count=0;
7    $('#count').text(count);
8  });
9});
10</script>
11<div class="top-banner">
12<h1>
1360名集客まで残り<span id="count">5</span>名
14</h1>
15<form>
16<input type="submit" value="参加決定" name="submit" id="attend">
17</form>
18</div>