在 javascript 中設置 id 屬性會阻止 function 正常運行

Question

我正在嘗試制作 memory 游戲，我想給每個圖像一個 ID，以便程序可以跟蹤哪些圖像是相同的。 我的 function 工作正常並生成隨機圖像網格，但是當我嘗試為圖像提供各自的 ID 時，隨機圖像就會丟失。 有誰知道為什么會這樣？

function placeImages(arr){
let place = 0;
let num = 0;
let box = 1;
for(let i = 0; i < 10; i++){
    num = arr[place];
    const pic = document.createElement('img');
    pic.id = `${num}`; //THIS IS THE PROBLEM
    // pic.setAttribute('id', `${num}`); //number pics
    pic.classList.toggle('pic');
    pic.setAttribute('src', `./images/${num}.png`);
    document.getElementById(`${box}`).appendChild(pic); //goes box by box and add image
    box++;
    place++;
    
}
console.log(arr);

}

該數組是 10 個數字 1-5 的隨機數組，僅重復一次，如 {1, 3, 2, 5, 5, 3, 2, 1, 4, 4} 第一個圖像是“pic.id = ${num} ;" 注釋掉了，第二個沒有注釋掉。 如果代碼難以理解，我剛開始學習很抱歉。

沒有 id的結果 有 id 的結果

Answer 1

使用setAttribute() 。

將pic.id更改為

pic.setAttribute("id", `${num}`);

Answer 2

所以我認為這歸結為 ID 屬性對於頁面上的每個 HTML 元素應該是完全唯一的。 但是，您的代碼有多個相同的 ID。 在您發布的未顯示圖像的圖像中，它試圖在第 12 行為您提供一個 ID 為 ${box} 的元素。 您希望這是您的 div 來放置圖像，但相反，它可能獲得了您在循環的先前迭代中創建的圖像元素。 這是我的猜測，希望對您有所幫助。

要點：保持每個 HTML 元素的唯一 ID

我建議做的是這樣的：

pic.id = `pic-${num}-${i}`; 

這會做這樣的事情：

 <img src="4.png" id="pic-4-2"> 

這樣，每個 ID 都將是唯一的，因為圖像將以“pic”為前綴，並以迭代編號為后綴。 然后稍后在您的代碼中，您可以拼接出中間數字以將它們與另一個圖像匹配。