teratail
回答率
85.47%
質問するログイン新規登録
トップHTML5に関する質問jspでのカウントアップ処理について

編集履歴

質問編集履歴

6

内容変更

2022/10/27 08:35

投稿

Bobsup
Bobsup

スコア0

test CHANGED
File without changes
test CHANGED
@@ -11,40 +11,53 @@
11
11
  </tr>
12
12
  </thead>
13
13
  // DBのレコード分繰り返す
14
+ <%
15
+ int i = 1;
14
- <% for(Item item : itemList) { %>
16
+ for(Item item : itemList) {
17
+ %>
15
- <tbody>
18
+ <tbody>
16
- <tr>
19
+ <tr>
17
- <td><%= item.getItemId() %></td>
20
+ 　<td><%= item.getItemId() %></td>
18
- <td><%= item.getItemName() %></td>
21
+ <td style="text-align: left"><%= item.getItemName() %><input type="hidden" name="itemName"></td>
19
- <td><%= item.getSize() %></td>
22
+ <td><%= item.getSize() %></td>
20
- <td>
23
+ <td >
21
- <label>0</label>
24
+ <span id="q<%= i %>">0</span>
22
- <input type="button" id="btn_count_up" value="カウントアップ" />
25
+ <input type="button" value="🔻" id="btnSub<%= i %>"/>
23
- <input type="button" id="btn_reset" value="カウントダウン"/>
26
+ <input type="button" value="🔺" id="btnAdd<%= i %>"/>
24
- </td>
27
+ 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　</td>
25
- <td<%= item.getSize() %></td>
28
+ <td><%= item.getPrice%></td>
26
- </tr>
29
+ </tr>
27
- </tbody>
30
+ </tbody>
31
+ <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
32
+ <script type="text/javascript">
33
+ var nowCount<%= i %> = $("#q<%= i %>").html()
34
+ nowCount<%= i %> = parseInt(nowCount<%= i %>);
35
+ if(nowCount<%= i %> < 20){
36
+ // カウントアップ
37
+ var up<%= i %> = document.getElementById('btnAdd<%= i %>');
38
+ up<%= i %>.onclick = function (){
39
+ var thisCount<%= i %> = $("#q<%= i %>").html();
40
+ thisCount<%= i %> = parseInt(thisCount<%= i %>);
41
+ thisCount<%= i %> = thisCount<%= i %> + 1;
42
+ $("#q<%= i %>").html(thisCount<%= i %>);
43
+ }
44
+ }else if( nowCount<%= i %> > 0){
45
+ // カウントダウン
46
+ var dw<%= i %> = document.getElementById('btnSub<%= i %>');
47
+ dw<%= i %>.onclick = function (){
48
+ var thisCount<%= i %> = $("#q<%= i %>").html();
49
+ thisCount<%= i %> = parseInt(thisCount<%= i %>);
50
+ thisCount<%= i %> = thisCount<%= i %> - 1;
51
+ $("#q<%= i %>").html(thisCount<%= i %>);
52
+ }
53
+ }
28
- <% } %>
54
+ </script>
55
+ <%
56
+ i++;
57
+ }
58
+ %>
29
59
  </table>
30
- <script>
31
- window.onload = function() {
32
- var count_disp = document.getElementsByClassName('count_disp');
33
- var btn_count_up = document.getElementsByClassName('btn_count_up');
34
- var count_value = 0;
35
- for (var i=0, len=count_disp.length|0; i<len; i=i+1|0) {
36
- // カウントアップボタンクリック処理
37
- count_up_btn.onclick = function (){
38
- count_value += 1;
39
- count_disp.innerHTML = count_value;
40
- };
41
- }
42
- // document.getElementByClassName("disp_count").value = result;
43
- }
44
- </script>
45
60
  ```
46
61
 
47
- 例えばこのようなテーブルがあったときに、数量列の「カウントアップ」ボタンを押すと同じ行の数量が１カウントアップされ、「カウントダウン」ボタンを押すと同じ行の数量が１カウントダウンされるというのをjavascriptで作りたいです。
62
+ 「数量」を範囲指定（0〜20）したい場合、上記のコードで合ってると思うのですが、指定範囲外もカウントが続いてしまいます。
48
- どう作っても一番上の行しかボタンが反応しなくて困っています。
49
- 作り方がわかる方いたらご教授ください。
63
+ どのような原因が考えられるでしょうか？
50
-
HTML5JSPJavaJavaScript

5

内容の修正

2022/10/27 01:27

投稿

Bobsup
Bobsup

スコア0

test CHANGED
File without changes
test CHANGED
@@ -29,40 +29,18 @@
29
29
  </table>
30
30
  <script>
31
31
  window.onload = function() {
32
-
33
- // オブジェクトと変数の準備
34
- var count_disp = document.getElementById("disp_count");
32
+ var count_disp = document.getElementsByClassName('count_disp');
35
- var count_up_btn = document.getElementById("btn_count_up");
33
+ var btn_count_up = document.getElementsByClassName('btn_count_up');
36
- var reset_btn = document.getElementById("btn_reset");
37
- var count_value = 0;
34
+ var count_value = 0;
38
-
35
+ for (var i=0, len=count_disp.length|0; i<len; i=i+1|0) {
39
- // カウントアップボタンクリック処理
36
+ // カウントアップボタンクリック処理
40
37
  count_up_btn.onclick = function (){
41
38
  count_value += 1;
42
39
  count_disp.innerHTML = count_value;
43
40
  };
44
- // カウントアップボタンのマウスダウン処理
45
- count_up_btn.onmousedown = function() {
46
- count_up_btn.style.backgroundColor = "#00FF00";
47
- }
41
+ }
48
- // カウントアップボタンのマウスアップ処理
49
- count_up_btn.onmouseup = function() {
50
- count_up_btn.style.backgroundColor = "";
42
+ // document.getElementByClassName("disp_count").value = result;
51
- }
43
+ }
52
- // リセットボタンのクリック処理
53
- reset_btn.onclick = function (){
54
- count_value -= 1;
55
- count_disp.innerHTML = count_value;
56
- };
57
- // リセットボタンのマウスダウン処理
58
- reset_btn.onmousedown = function() {
59
- reset_btn.style.backgroundColor = "#00FF00";
60
- }
61
- // リセットボタンのマウスアップ処理
62
- reset_btn.onmouseup = function() {
63
- reset_btn.style.backgroundColor = "";
64
- }
65
- };
66
44
  </script>
67
45
  ```
68
46
 
HTML5JSPJavaJavaScript

4

内容の変更

2022/10/26 12:03

投稿

Bobsup
Bobsup

スコア0

test CHANGED
File without changes
test CHANGED
@@ -19,8 +19,8 @@
19
19
  <td><%= item.getSize() %></td>
20
20
  <td>
21
21
  <label>0</label>
22
- <input type="button" id="countUp" value="カウントアップ" />
22
+ <input type="button" id="btn_count_up" value="カウントアップ" />
23
- <input type="button" id="countDown" value="カウントダウン"/>
23
+ <input type="button" id="btn_reset" value="カウントダウン"/>
24
24
  </td>
25
25
  <td<%= item.getSize() %></td>
26
26
  </tr>
HTML5JSPJavaJavaScript

3

内容の修正

2022/10/26 09:55

投稿

Bobsup
Bobsup

スコア0

test CHANGED
File without changes
test CHANGED
@@ -28,7 +28,41 @@
28
28
  <% } %>
29
29
  </table>
30
30
  <script>
31
+ window.onload = function() {
32
+
31
- // ここの中身
33
+ // オブジェクトと変数の準備
34
+ var count_disp = document.getElementById("disp_count");
35
+ var count_up_btn = document.getElementById("btn_count_up");
36
+ var reset_btn = document.getElementById("btn_reset");
37
+ var count_value = 0;
38
+
39
+ // カウントアップボタンクリック処理
40
+ count_up_btn.onclick = function (){
41
+ count_value += 1;
42
+ count_disp.innerHTML = count_value;
43
+ };
44
+ // カウントアップボタンのマウスダウン処理
45
+ count_up_btn.onmousedown = function() {
46
+ count_up_btn.style.backgroundColor = "#00FF00";
47
+ }
48
+ // カウントアップボタンのマウスアップ処理
49
+ count_up_btn.onmouseup = function() {
50
+ count_up_btn.style.backgroundColor = "";
51
+ }
52
+ // リセットボタンのクリック処理
53
+ reset_btn.onclick = function (){
54
+ count_value -= 1;
55
+ count_disp.innerHTML = count_value;
56
+ };
57
+ // リセットボタンのマウスダウン処理
58
+ reset_btn.onmousedown = function() {
59
+ reset_btn.style.backgroundColor = "#00FF00";
60
+ }
61
+ // リセットボタンのマウスアップ処理
62
+ reset_btn.onmouseup = function() {
63
+ reset_btn.style.backgroundColor = "";
64
+ }
65
+ };
32
66
  </script>
33
67
  ```
34
68
 
HTML5JSPJavaJavaScript

2

内容の改善

2022/10/26 09:37

投稿

Bobsup
Bobsup

スコア0

test CHANGED
File without changes
test CHANGED
@@ -19,14 +19,17 @@
19
19
  <td><%= item.getSize() %></td>
20
20
  <td>
21
21
  <label>0</label>
22
- <input type="button" value="カウントアップ" />
22
+ <input type="button" id="countUp" value="カウントアップ" />
23
- <input type="button" value="カウントダウン"/>
23
+ <input type="button" id="countDown" value="カウントダウン"/>
24
24
  </td>
25
25
  <td<%= item.getSize() %></td>
26
26
  </tr>
27
27
  </tbody>
28
28
  <% } %>
29
29
  </table>
30
+ <script>
31
+ // ここの中身
32
+ </script>
30
33
  ```
31
34
 
32
35
  例えばこのようなテーブルがあったときに、数量列の「カウントアップ」ボタンを押すと同じ行の数量が１カウントアップされ、「カウントダウン」ボタンを押すと同じ行の数量が１カウントダウンされるというのをjavascriptで作りたいです。
HTML5JSPJavaJavaScript

1

誤字の修正

2022/10/26 08:49

投稿

Bobsup
Bobsup

スコア0

test CHANGED
File without changes
test CHANGED
@@ -1,32 +1,35 @@
1
1
  jspファイル内での質問です。
2
+ ```JSP
2
3
  <table>
3
- <thead>
4
+ <thead>
4
- <tr>
5
+ <tr>
5
- <th>ID</th>
6
+ <th>ID</th>
6
- <th>商品名</th>
7
+ <th>商品名</th>
7
- <th>サイズ</th>
8
+ <th>サイズ</th>
8
- <th>数量</th>
9
+ <th>数量</th>
9
- <th">単価</th>
10
+ <th">単価</th>
10
- </tr>
11
+ </tr>
11
- </thead>
12
+ </thead>
12
- // DBのレコード分繰り返す
13
+ // DBのレコード分繰り返す
13
- <% for(Item item : itemList) { %>
14
+ <% for(Item item : itemList) { %>
14
- <tbody>
15
+ <tbody>
15
- <tr>
16
+ <tr>
16
- <td><%= item.getItemId() %></td>
17
+ <td><%= item.getItemId() %></td>
17
- <td><%= item.getItemName() %></td>
18
+ <td><%= item.getItemName() %></td>
18
- <td><%= item.getSize() %></td>
19
+ <td><%= item.getSize() %></td>
19
- <td>
20
+ <td>
20
- <label>0</label>
21
+ <label>0</label>
21
- <input type="button" value="カウントアップ" />
22
+ <input type="button" value="カウントアップ" />
22
- <input type="button" value="カウントダウン"/>
23
+ <input type="button" value="カウントダウン"/>
23
- </td>
24
+ </td>
24
- <td<%= item.getSize() %></td>
25
+ <td<%= item.getSize() %></td>
25
- </tr>
26
+ </tr>
26
- </tbody>
27
+ </tbody>
27
- <% } %>
28
+ <% } %>
28
29
  </table>
30
+ ```
29
31
 
30
32
  例えばこのようなテーブルがあったときに、数量列の「カウントアップ」ボタンを押すと同じ行の数量が１カウントアップされ、「カウントダウン」ボタンを押すと同じ行の数量が１カウントダウンされるというのをjavascriptで作りたいです。
31
33
  どう作っても一番上の行しかボタンが反応しなくて困っています。
32
34
  作り方がわかる方いたらご教授ください。
35
+
HTML5JSPJavaJavaScript
JSP