如何在使用JS構建HTML時提供唯一ID？

Question

所以我試圖建立商店功能，我想要做的是能夠通過按下頁面上的「添加到購物車」按鈕，將每個對象的信息保存到存儲。我想知道如何使用for循環來創建每個「添加到購物車」按鈕時創建唯一ID，如下所示創建多個項目/功能框？

// temporary javascript thingy while we build the remove catalogs 
var popularItems = 
     [ 
      { 
       "itemImageSrc" : "./images/StoreProducts/StrawberryPi2ModelB.jpg", 
       "itemImageAlt" : "placeholder", 
       "itemDescription" : "<p> Strawberry Pi 3 Model B </p>", 
       "itemPrice" : "<p>$49.95</p>", 
       "itemPopular" : "true" 
      }, 
      { 
       "itemImageSrc" : "./images/StoreProducts/StrawberryPiZero.jpg", 
       "itemImageAlt" : "placeholder", 
       "itemDescription" : "<p> Strawberry Pi Zero </p>", 
       "itemPrice" : "<p>$29.95</p>", 
       "itemPopular" : "true" 
      }, 
      { 
       "itemImageSrc" : "./images/StoreProducts/StrawberryPiCase.jpg", 
       "itemImageAlt" : "placeholder", 
       "itemDescription" : "<p> Strawberry Pi Case </p>", 
       "itemPrice" : "<p>$10.95</p>", 
       "itemPopular" : "true" 
      }, 
      { 
       "itemImageSrc" : "./images/StoreProducts/placeholder.png", 
       "itemImageAlt" : "placeholder", 
       "itemDescription" : "<p> Strawberry Pi Extension Kit </p>", 
       "itemPrice" : "<p>$149.95</p>", 
       "itemPopular" : "false" 
      } 
     ]; 

document.write('<div class="feature-container">'); 

for (var i = 0; i < popularItems.length; i++) { 

if (popularItems[i].itemPopular == "true") { 

document.writeln('<div class="feature-box">'); 
document.write('<img src="'); 
document.writeln(popularItems[i].itemImageSrc); 
document.write('" alt="'); 
    document.write(popularItems[i].itemImageAlt); 
document.writeln('">'); 

document.write('<div class="feature-box-model" id="var i">'); 
document.write(popularItems[i].itemDescription); 
document.writeln('</div>'); 

document.write('<div class="feature-box-price">'); 
document.write(popularItems[i].itemPrice); 
document.writeln('</div>'); 

document.writeln('<FORM>'); 
    document.writeln('<INPUT TYPE="button" VALUE="Add To Cart" onclick="saveData()" id="unique">'); 
document.writeln('</FORM>'); 
document.writeln('</div>'); 

} 

}

Answer 1

可以修改此行：

document.writeln('<INPUT TYPE="button" VALUE="Add To Cart" onclick="saveData()" id="unique">');

是：

document.writeln('<INPUT TYPE="button" VALUE="Add To Cart" onclick="saveData()" id="item_'+i+'">');

Answer 2

我假設明顯

`for(let =0; i<n; i++){ 
    let key = 'key_'+i; 
    .... 
}' 

不能滿足您的需求？

然後一個簡單的方法可能是這樣的：

`key = 'key_'+Math.random().toString().slice(2);` 
`// => "key_21542707442294184"`