カウント数を記録するwebページを作っています.カウント数をページ上に保存する方法を教えてください.

回数を記録するためのwebページを作っています.

したいこと

・ボタンを押してカウントできる.
・他の人とカウント数を共有できる.

現状のコードとwebページ

index.html
1<!doctype html>
2<html lang="ja">
3    <head>
4        <meta charset="utf8" />
5        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6    </head>
7    <body>
8        <table border="1">
9            <tr>
10                <td colspan="3"><b>6cell KYPOM</b></td>
11            </tr>
12            <tr>
13                <th>番号</th>
14                <th>回数</th>
15                <th>備考</th>
16            </tr>
17            <tr>
18                <td>140</td>
19                <td width="300">
20                    <div class="container">
21                        <button id="plus">+</button>
22                        <button id="minus">-</button>
23                        <button id="reset">Reset</button>
24                        <input id="counter" value="0">
25                        <script src="app.js"></script>
26                    </div>
27                </td>
28                <td><textarea cols="80" rows="5" id="reviewTextarea"></textarea></td>
29            </tr>
30            <tr>
31                <td>142</td>
32                <td width="300">
33                    <div class="container">
34                        <button id="plus">+</button>
35                        <button id="minus">-</button>
36                        <button id="reset">Reset</button>
37                        <input id="counter" value="0">
38                        <script src="app.js"></script>
39                    </div>
40                </td>
41                <td><textarea cols="80" rows="5" id="reviewTextarea"></textarea></td>
42            </tr>
43        </table>
44    </body>
45</html>

app.js
1let counter = document.getElementById("counter");
2
3let plus = document.getElementById("plus");
4let ClickPlus = () => {
5    counter.value++;
6}
7plus.addEventListener("click", ClickPlus);
8
9let minus = document.getElementById("minus");
10let ClickMinus = () => {
11    counter.value--;
12}
13minus.addEventListener("click", ClickMinus);
14
15let reset = document.getElementById("reset");
16let ClickReset = () => {
17    counter.value = 0;
18}
19reset.addEventListener("click", ClickReset);

問題点

・1つ目の枠は回数の+-ができるが2つ目の枠は+-ボタンが機能しない.
・リロードするとカウント数, 備考が消える.
・他の人と共有ができない.

質問

同じ.jsファイルをscript srcで何度も使うことはできないのでしょうか.改善方法を教えてください.
リロードしても内容が保存されるような方法を教えてください.
他の人とカウント数が共有できるような方法を教えてください.

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

回答3件

他の人とカウント数が共有できるような方法

この時点でクライアント側だけでの対応ではできません（自身だけならWebStorageなどがある）
サーバサイドの言語を通してデータベースに保存し、参照するようにしてください。
※大抵の言語で大抵のことができるのでまずは自身で選択してやってみるところから始めてください。

投稿2022/04/08 05:51

編集2022/04/08 06:12

m.ts10806

総合スコア80850

カウントしたデータをサーバー側に保存する必要があります。
サーバー側にPHP等で保存する＋読み込むプログラムを作成するか、
Javascirptだけで作成するならfirebaseを使用して外部にデータを保存するのがいいのではないかと思います。

投稿2022/04/08 05:28

gogoweb_ikeda

総合スコア1426

雑ですがイメージとして参考になれば。
手っ取り早いのはこんな感じです。
Ajaxで値をPHPに渡して、テキストファイルに記録し、そのファイルをロード時に読み込む形です。

index.php
1<!doctype html>
2<html lang="ja">
3<head>
4  <meta charset="utf8" />
5  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6</head>
7<body>
8  <table border="1">
9    <tr>
10      <th>回数</th>
11    </tr>
12    <tr>
13      <td width="300">
14        <div class="container">
15          <button id="plus">+</button>
16          <input id="counter" name="count" value="<?php echo file_get_contents('count.txt');?>">
17        </div>
18      </td>
19    </tr>
20  </table>
21</body>
22<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
23<script>
24  let counter = document.getElementById("counter");
25  let plus = document.getElementById("plus");
26  let ClickPlus = () => {
27    counter.value++;
28    let countNum = counter.value;
29    $.ajax({
30      type: "POST",
31      url: " count.php",
32      data: { "val" : countNum },
33      dataType : "json"
34    }).done(function(data){
35      console.log('success');
36   }).fail(function(XMLHttpRequest, textStatus, error){
37    alert(error);
38  });
39 }
40 plus.addEventListener("click", ClickPlus);
41
42</script>
43</html>

count.php
1<?php
2  $num = filter_input(INPUT_POST, 'val');
3  $countList = array("val" => $num);
4  file_put_contents("count.txt",  $countList["val"]);
5  echo json_encode($countList);
6  exit;
7?>

この2つのファイルをPHPの動くサーバに上げれば、省いていますがやりたい形にはなっていると思います。

投稿2022/04/08 07:17