jspでのカウントアップ処理について

jspファイル内での質問です。

JSP
1<table>
2  <thead>
3    <tr>
4      <th>ID</th>
5      <th>商品名</th>
6      <th>サイズ</th>
7      <th>数量</th>
8      <th">単価</th>
9    </tr>
10  </thead>
11  // DBのレコード分繰り返す
12       <% 
13	  	int i = 1;
14	  	for(Item item : itemList) { 
15	  	%>
16			<tbody>
17				<tr>
18				   　<td><%= item.getItemId() %></td>
19					<td style="text-align: left"><%= item.getItemName() %><input type="hidden" name="itemName"></td>
20					<td><%= item.getSize() %></td>
21					<td >
22					<span id="q<%= i %>">0</span>
23					<input type="button" value="🔻" id="btnSub<%= i %>"/>
24					<input type="button" value="🔺" id="btnAdd<%= i %>"/>
25　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　</td>
26					<td><%= item.getPrice%></td>
27				</tr>
28			</tbody>
29			<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
30           <script type="text/javascript">
31           var nowCount<%= i %> = $("#q<%= i %>").html()
32           nowCount<%= i %> = parseInt(nowCount<%= i %>);
33           if(nowCount<%= i %> < 20){
34        		// カウントアップ
35        		var up<%= i %> = document.getElementById('btnAdd<%= i %>');
36        		up<%= i %>.onclick = function (){ 
37					var thisCount<%= i %> = $("#q<%= i %>").html();
38						thisCount<%= i %> = parseInt(thisCount<%= i %>);
39					    thisCount<%= i %> = thisCount<%= i %> + 1;
40					$("#q<%= i %>").html(thisCount<%= i %>);
41				}
42            }else if( nowCount<%= i %> > 0){
43				// カウントダウン
44				var dw<%= i %> = document.getElementById('btnSub<%= i %>');
45        		dw<%= i %>.onclick = function (){ 
46					var thisCount<%= i %> = $("#q<%= i %>").html();
47						thisCount<%= i %> = parseInt(thisCount<%= i %>);
48					    thisCount<%= i %> = thisCount<%= i %> - 1;
49					$("#q<%= i %>").html(thisCount<%= i %>);
50				}
51            }
52			</script>
53		<%	
54			i++;
55	  	} 
56		%>
57</table>

「数量」を範囲指定（0〜20）したい場合、上記のコードで合ってると思うのですが、指定範囲外もカウントが続いてしまいます。
どのような原因が考えられるでしょうか？

m.ts10806

2022/10/26 09:08

提示のコードだけだと再現できません。ボタンに対する処理コードも含めて一通り提示してください。

Bobsup

2022/10/26 09:38

script内処理内容のコード全てをご教授いただきたいです。

m.ts10806

2022/10/26 09:42

それは質問ではなく作業依頼となってしまうので、誰も答えないと思います。「どう作っても一番上の行しかボタンが反応しなくて困っています。」と仰っていますし、そのコードを提示して、問題点をアドバイスもらう形をとってください。

Bobsup

2022/10/26 09:55

失礼いたしました。書き加えました。

jimbe

2022/10/26 16:24

java と javascript は関係ありません。

m.ts10806

2022/10/26 20:50

jimbeさんコードからするとサーバーサイドがJava、VIEWがJSPで、要素をJavaScriptで操作しようとしているので、無関係ではないと思います。

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

回答1件

      <input type="button" id="countUp" value="カウントアップ" />
     <input type="button" id="countDown" value="カウントダウン"/>

HTMLのIDとJavaScriptで指定しているIDが一致していないのが気になりますが、
HTMLの規則として、IDは同一ページ内で重複不可です。
ループで作っているなら全て同じIDになっているはずです。
そこでイベントが最初のボタンにのみ適用された状態になっているのでしょう。

例えばclassを振ってgetElementsByClassName()もしくはquerySelectorAll()で取得した要素リストをループしてそれぞれにイベント振りましょう。

投稿2022/10/26 10:13

m.ts10806

総合スコア80850

Bobsup

2022/10/26 12:30

<label class="count">0</label> <input type="button" id="btn_count_up" class="count" value="カウントアップ" /> <input type="button" id="btn_reset" class="count" value="カウントダウン"/> とした場合 document.getElementsByClassName('count'); これをどのようにしてリストでループするのですか？