編集履歴

回答編集履歴

追記

2021/11/15 05:04

投稿

スコア531

test CHANGED Viewed

@@ -101,3 +101,139 @@
 </script>
 ```
+## 追記
+> この処理は２回までとかもできるのでしょうか？
+> １を押し１個表示され５を押し５個表示され　３回目以降は押しても表示できなくなる感じです。
+ボタンを押した回数をどこかに保存しておいて、画像追加処理の部分で判定してください。
+- [デモ - JSFiddle](https://jsfiddle.net/v6qtpkLb/)
+``` html
+<div id="basket" data-image-add-request-count="0"></div>
+<template id="image-template">
+  <img src="https://via.placeholder.com/512/999999/333333/?text=Ringo" style="width: 40px; height: 40px;">
+</template>
+<button id="button1">
+  - 1 -
+</button>
+<button id="button5">
+  - 5 -
+</button>
+<script>
+const basket = document.querySelector("#basket");
+const imageTemplate = document.querySelector("#image-template");
+const button1 = document.querySelector("#button1");
+const button5 = document.querySelector("#button5");
+const maxImageAddRequestCount = 2;
+basket.addEventListener("App.ImageAddRequest", (event) => {
+  const imageAddRequestCount = Number.parseInt(basket.dataset.imageAddRequestCount);
+  if (imageAddRequestCount >= maxImageAddRequestCount) {
+    return;
+  }
+  const imageCount = event.detail.imageCount ?? 0;
+  for (let count = 0; count < imageCount; count++) {
+    const image = imageTemplate.content.cloneNode(true);
+    basket.appendChild(image);
+  }
+  basket.dataset.imageAddRequestCount = imageAddRequestCount + 1;
+});
+button1.addEventListener("click", (event) => {
+  basket.dispatchEvent(new CustomEvent("App.ImageAddRequest", {
+    detail: {
+      imageCount: 1,
+    },
+  }));
+});
+button5.addEventListener("click", (event) => {
+  basket.dispatchEvent(new CustomEvent("App.ImageAddRequest", {
+    detail: {
+      imageCount: 5,
+    },
+  }));
+});
+</script>
+```