HTMLで何度もjavascriptをつかいたい

わからないこと

HTML上で同じjsファイルを何度も使う方法

現在のコード

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                <th>番号</th>
11                <th>回数</th>
12                <th>備考</th>
13            </tr>
14            <tr>
15                <td>140</td>
16                <td width="300">
17                    <div class="container">
18                        <button id="plus">+</button>
19                        <button id="minus">-</button>
20                        <button id="reset">Reset</button>
21                        <input id="counter" value="0">
22                        <script src="app.js"></script>
23                    </div>
24                </td>
25                <td><textarea cols="80" rows="5" id="reviewTextarea"></textarea></td>
26            </tr>
27            <tr>
28                <td>142</td>
29                <td width="300">
30                    <div class="container">
31                        <button id="plus">+</button>
32                        <button id="minus">-</button>
33                        <button id="reset">Reset</button>
34                        <input id="counter" value="0">
35                        <script src="app.js"></script>
36                    </div>
37                </td>
38                <td><textarea cols="80" rows="5" id="reviewTextarea"></textarea></td>
39            </tr>
40        </table>
41    </body>
42</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);

できないこと

一番上の枠ではボタンで回数をカウントできますが2番目の枠ではうまくいかない.

考えたこと

同じidを使っているため一番目だけがうまくいっているのではないか.→別なidにすればよいのではないか.→枠を増やした場合大変なことになる.
getElementById("counter")
getElementById("counter2")
・・・

教えて欲しいこと

全ての枠でカウントボタンが使えるようにするためにはどのようにすればよいか.
よろしくお願いします.

yambejp

2022/04/12 09:44

マイナスボタンは0未満になってもいいのでしょうか？リセットボタンで隣のセルの備考はリセットする必要はないですね？

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

回答3件

イベントをクラスに付与すれば大変なことにはならないと思います。

投稿2022/04/12 09:08

m.ts10806

総合スコア80854

数ヶ月前の質問なのでもう解決されたこととは思いますが、今後このページに到達した方のために回答させていただきます。

問題点

idを使い回している
- id1種類につき1つの要素にしか付与してはいけません。
- 代わりに、classを使いましょう。
.getElementById()で取得できるのは最初の1つのみ
- idを使いまわさないということは、特定のidをもっている要素は1つしかないはずなので、.getElementById()で取得できるのは仕様的に1要素のみです。
- プログラムは基本的に上から順番に読み込んでいくので、1つ目の要素が一番最初に読み込まれるので、それが取得されます。そして読み込む行為を終了します。（だから一番目のみ）
- .querySelector('#id')も同様に、最初の1つのみ取得されます。

解決策

idではなくclassを使用する。
複数の要素を取得するために、.getElementsByClassName()または.querySelectorAll()を使用する。

コード例

リンク：テストコード on JSFiddle（実際にさわって確認してみてください）

html
1<button class="btn-a">Aボタン</button>
2<button class="btn-b">Bボタン</button>
3<button class="btn-c">Cボタン</button>
4
5<hr>
6
7<button class="btn-a">Aボタン</button>
8<button class="btn-b">Bボタン</button>
9<button class="btn-c">Cボタン</button>
10
11<hr>
12
13<button class="btn-a">Aボタン</button>
14<button class="btn-b">Bボタン</button>
15<button class="btn-c">Cボタン</button>

javascript
1// ボタン要素の取得
2const A_BUTTONS = document.querySelectorAll('.btn-a');
3const B_BUTTONS = document.querySelectorAll('.btn-b');
4const C_BUTTONS = document.querySelectorAll('.btn-c');
5
6// ボタンAの関数
7function showA(event) {
8	alert(`${event.currentTarget.textContent}が押されました。`);
9}
10
11// ボタンBの関数
12function showB(event) {
13	alert(`${event.currentTarget.textContent}が押された！！`);
14}
15
16// ボタンCの関数
17function showC(event) {
18	alert(`${event.currentTarget.textContent}が押されて、発動。`);
19}
20
21// ボタンがクリックされたときのイベントを設定
22A_BUTTONS.forEach(element => element.addEventListener('click', showA));
23B_BUTTONS.forEach(element => element.addEventListener('click', showB));
24C_BUTTONS.forEach(element => element.addEventListener('click', showC));
25// A_BUTTONSなどの取得してきた要素はNodeListという配列みたいなものなので、A_BUTTONS.addEventListener()とはかけません。
26// 上記コードのように、.forEach()で一つ一つにイベントリスナーをつけていきましょう。
27コード

いつかこの記事にたどり着く誰かの参考になれば幸いです。

投稿2022/09/24 09:40

編集2022/09/24 09:53

Cocode

総合スコア2314

リセットするならformに囲むほうがよいですね
ざっくりこんな感じで

javascript
1<script>
2document.addEventListener('click',e=>{
3  const t=e.target;
4  let flg=false;
5  if((flg=t.matches('.plus'))||t.matches('.minus')){
6    const counter=t.closest('form').querySelector('.counter');
7    counter.value=Number(counter.value)+(flg?1:-1);
8  }
9});
10</script>
11<table border="1">
12<col/>
13<col width="300" />
14<col/>
15<thead>
16<tr>
17<th>番号</th>
18<th>回数</th>
19<th>備考</th>
20</tr>
21<thead>
22<tbody>
23<tr>
24<td>140</td>
25<td>
26<form>
27<div class="container">
28<button class="plus" type="button">+</button>
29<button class="minus" type="button">-</button>
30<button type="reset">Reset</button>
31<input class="counter" value="0">
32</div>
33</form>
34</td>
35<td><textarea cols="80" rows="5" class="reviewTextarea"></textarea></td>
36</tr>
37<tr>
38<td>142</td>
39<td>
40<form>
41<div class="container">
42<button class="plus" type="button">+</button>
43<button class="minus" type="button">-</button>
44<button type="reset">Reset</button>
45<input class="counter" value="0">
46</div>
47</form>
48</td>
49<td><textarea cols="80" rows="5" class="reviewTextarea"></textarea></td>
50</tr>
51</tbody>
52</table>