画像表示の表示制限の方法

html
1<!DOCTYPE html>
2<meta charset="UTF-8">
3
4<body>
5
6<div id="basket"></div>
7
8<template id="image-template">
9  <img src="img/ringo.png" alt="りんご画像" style="width: 40px; height: 40px;">
10</template>
11
12<button id="button1">
13  数１ボタン
14</button>
15
16<button id="button5">
17  数５ボタン
18</button>
19
20<script>
21const basket = document.querySelector("#basket");
22const imageTemplate = document.querySelector("#image-template");
23const button1 = document.querySelector("#button1");
24const button5 = document.querySelector("#button5");
25
26basket.addEventListener("App.ImageAddRequest", (event) => {
27  const imageCount = event.detail.imageCount ?? 0;
28
29  for (let count = 0; count < imageCount; count++) {
30    const image = imageTemplate.content.cloneNode(true);
31
32    basket.appendChild(image);
33  }
34});
35
36button1.addEventListener("click", (event) => {
37  basket.dispatchEvent(new CustomEvent("App.ImageAddRequest", {
38    detail: {
39      imageCount: 1,
40    },
41  }));
42});
43
44button5.addEventListener("click", (event) => {
45  basket.dispatchEvent(new CustomEvent("App.ImageAddRequest", {
46    detail: {
47      imageCount: 5,
48    },
49  }));
50});
51</script>
52
53</body>
54</html>

数１ボタンを押せばりんごの画像が１つ表示され、
もう一度数１ボタンを押せばもう一つ（計２個）表示される
数５ボタンも同様で表示される数が１から５になる
プログラムを作っているのですが

ボタンを何回も押すと押した分だけ増えるのを制限を掛けたいです。

例）
数１ボタンを押す１回目
↓
数５ボタンを押す２回目（計６個表示中）
↓
３回目以降の入力は無効

お願いします。

Lhankor_Mhy

2021/11/15 03:19

数５→数１と押した場合の想定している動作を教えてください。

m.aru8

2021/11/15 03:47

数５で５個りんごが表示され数１で１個りんごが表示される（計６個）順番では数は変わらないプログラムです。

Lhankor_Mhy

2021/11/15 05:01

「数５ボタンも同様で表示される数が１から５になる」とありますが、これは「１から６になる」が正しいということですか？

m.aru8

2021/11/15 05:52

〜数１ボタンを２回入力した時の処理〜数１ボタンを押すとりんごが１個表示（計１個表示）もう一度数１ボタンを押すとりんごが１個表示（計２個表示）〜数５ボタンを２回入力した時の処理〜数５ボタンを押すとりんごが５個表示（計５個表示）もう一度数５ボタンを押すとりんごが５個表示（計１０個表示）〜数１ボタン入力後に数５ボタンを入力した時の処理〜数１ボタンを押すとりんごが１個表示（計１個表示）その後に数５ボタンを押すとりんごが５個表示（計６個表示）〜数５ボタン入力後に数１ボタンを入力した時の処理〜数５ボタンを押すとりんごが５個表示（計５個表示）その後に数１ボタンを押すとりんごが１個表示（計６個表示）

Lhankor_Mhy

2021/11/15 06:02 編集

同じボタンを2回押すことができるのですね。そうすると、「何回も押すと押した分だけ増えるのを制限を掛けたい」という制限の具体的な内容は何でしょうか？ 10を超えることができない、とかですか？

Lhankor_Mhy

2021/11/15 06:04 編集

あ、もしかして、ボタンを通算して2回まで、ということですか？

m.aru8

2021/11/15 06:16

今解決できました。お手数かけました

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

回答1件

自己解決

html
1const maxImageAddRequestCount = 2;
2
3basket.addEventListener("App.ImageAddRequest", (event) => {
4  const imageAddRequestCount = Number.parseInt(basket.dataset.imageAddRequestCount);
5
6  if (imageAddRequestCount >= maxImageAddRequestCount) {
7    return;
8  }
9
10  const imageCount = event.detail.imageCount ?? 0;
11
12  for (let count = 0; count < imageCount; count++) {
13    const image = imageTemplate.content.cloneNode(true);
14
15    basket.appendChild(image);
16  }
17
18  basket.dataset.imageAddRequestCount = imageAddRequestCount + 1;
19});