通過.map回圈創建按鈕的問題

我正在嘗試在 JavaScript 中創建基本清單。我想將專案添加到作為玩家庫存的陣列中。庫存陣列中的內容將顯示在多個 div 上（每個專案一個）。我已經開始體驗并開始使用基礎知識，但我想詳細說明一下，并為專案串列中的每個專案創建按鈕，以便稍后使用這些按鈕將專案添加到庫存中。

我首先選擇我的 HTML div 并創建一個基本的 itemList 陣列和一個 playerInv 空陣列：

const container = document.querySelector('.container');
const inventory = document.querySelector('.inventory');
const invItem = document.querySelectorAll('.grid-item');

const itemList = [{
    id: 1,
    name: "Coke Bottle",
    quality: "usable"
  },
  {
    id: 6,
    name: "Pair of Jeans",
    quality: "pants"
  }
]

// Player inventory, is by default empty.
const playerInv = []

const itemBtnContainer = document.createElement("div");
itemBtnContainer.classList.add("item-add-btn-ctn");
container.appendChild(itemBtnContainer);

let itemBtn;

function addItemBtn() {
  itemList.map((item) => {
    itemBtn = document.createElement("button");
    itemBtn.classList.add("item-add-btn");
    itemBtnContainer.appendChild(itemBtn);
    itemBtn.innerText  = item.name;
  })
}
addItemBtn();

<div class="container">
  CONT
  <div class="inventory">
    <div class="inventory-left">
      <div class="inventory-left-title">Your inventory</div>
      <div class="inventory-left-grid">
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
      </div>
    </div>
    <div class="inventory-right"></div>
  </div>
</div>

因此，為了創建我的按鈕，我的想法是使用 map 回圈遍歷我的 itemList 陣列。每個 itemList 項將創建一個具有“item-add-btn”類的按鈕，并且在按鈕內將顯示該項的名稱。

從視覺上看，它有效。因為有 6 個 itemList 項，所以我有 6 個按鈕，但是因為我在回圈中創建了按鈕，所以我無法在回圈之外訪問它們。事實上，如果我 console.log(itemBtn) 它回傳“未定義”，所以我不能用 addEventListener 創建一個 onClick 函式，以便以后撰寫我的 addItemToInv() 函式。我理解為什么它不起作用，但我真的不知道我還能做些什么來獲得相同的結果并能夠使用我的按鈕。

我什至不知道我還能嘗試什么，因為這是一個非常具體的需求。

uj5u.com熱心網友回復：

首先，您應該使用for .. oforArray.prototype.forEach因為.map構建了一個您要丟棄的新陣列。

其次，制作一個createButton回傳按鈕的函式，以便您可以將其存盤為一個值 -

function createButton(item) {
  const itemBtn = document.createElement("button")
  itemBtn.type = "button"
  itemBtn.classList.add("item-add-btn")
  itemBtn.innerText  = item.name
  return itemBtn
}

現在你可以回圈 -

for (const item of itemList) {
  // create button reference
  const button = createButton(item)

  // add click handler
  button.addEventListener("click", ...)

  // append button to container
  itemBtnContainer.appendChild(button)
}

這是一個完整的作業演示 -

const inventory = []

const itemList = [{id:1,name: "Coke Bottle",quality: "usable"},{id: 6,name: "Pair of Jeans",quality: "pants"}]

function renderInventory() {
  document
  .querySelector("#inventory")
  .textContent = `inventory: ${JSON.stringify(inventory, null, 2)}`
}

function createButton(text, onClick) {
  const e = document.createElement("button")
  e.type = "button"
  e.textContent = text
  e.addEventListener("click", onClick)
  return e
}

function addToInv(item) {
  return event => {
    inventory.push(item)
    renderInventory()
  }
}

renderInventory()

for (const item of itemList)
  document.body.appendChild(createButton(item.name, addToInv(item)))

#inventory {
  padding: 1rem;
  background-color: #eee;
  font-family: monospace;
}

<pre id="inventory"></pre>

uj5u.com熱心網友回復：

只需在你的回圈中添加你的聽眾嗎？

itemBtn.addEventListener('click', function(event){
  const elem = event.target;
});

為什么選擇全域 itemBtn ？

uj5u.com熱心網友回復：

在您的地圖中，您永遠不會回傳itemBtn您創建的。如果您像下面這樣稍微修改您的代碼，您應該會得到一個可以使用的按鈕元素串列。

function addItemBtn() {
    return itemList.map((item) => {
        const itemBtn = document.createElement("button");
        itemBtn.classList.add("item-add-btn");
        itemBtnContainer.appendChild(itemBtn);
        itemBtn.innerText  = item.name;
        return itemBtn;
    });
}

const buttons = addItemBtn(); // List of button elements to do with what you will

我想提一下，一旦定義了addItemToInv函式，就可以執行以下操作：

function addItemToInv(item) {
  // Logic to add item to inventory here
}

function addItemBtn() {
    return itemList.map((item) => {
        const itemBtn = document.createElement("button");
        itemBtn.classList.add("item-add-btn");
        itemBtnContainer.appendChild(itemBtn);
        itemBtn.innerText  = item.name;
        itemBtn.addEventListener("click", () => addItemToInv(item));
        return itemBtn;
    });
}

uj5u.com熱心網友回復：

目前尚不清楚為什么您需要訪問回圈外的按鈕。您顯然在使用地圖，所以回傳按鈕，您現在有一組按鈕。

let itemBtns;

function addItemBtn() {
    itemBtns = itemList.map((item) => {
        itemBtn = document.createElement("button");
        itemBtn.classList.add("item-add-btn");
        itemBtnContainer.appendChild(itemBtn);
        itemBtn.innerText = item.name;
        return itemBtn;
    });
}

但是您可能只想知道何時單擊按鈕，因此您應該在創建按鈕時將事件偵聽器添加到按鈕。

function addItemBtn() {
    itemList.forEach((item) => {
        itemBtn = document.createElement("button");
        itemBtn.classList.add("item-add-btn");
        itemBtnContainer.appendChild(itemBtn);
        itemBtn.innerText = item.name;
        itemBtn.type = "button";
        itemBtn.addEventListener("click", () => { 
          console.log(item); 
        });
    });
}

標籤：

上一篇：如何創建按鈕的延長線

下一篇：這段C 代碼的哪一部分是父視窗？