firebaseのdiv Idはonclickの

Question

私は

function retrieveProductList(data) { 

var container = document.getElementById('listing_gallery'); 
container.innerHTML = ''; 

data.forEach(function(listingSnap) { // loop over all jobs 
    var key = listingSnap.key; 
    var Items = listingSnap.val(); 
    var productCard = `     
        <div class="col-sm-4"> 
        <div class="card" onclick="showproductpage();" id="${key}"> 
         <img class="card-img-top" src="${Items.ProductImageUrl}" alt="Card image cap"> 
         <div class="card-block"> 
          <h4 class="card-title">Firebase</h4> 
          <p class="card-title">${Items.NSN}</p> 

          <p class="card-text" id="product_price">${Items.Price}</p> 
          <a href="#" data-name="Lemon" data-price="5" class="add-to-cart btn btn-primary" onclick="Add_item_to_cart();">Add to cart</a> 
         </div> 
        </div> 
     </div> 
        `; 
    container.innerHTML += productCard; 


}) 
} 

機能が働くの下のコードを使用してこのカードを移入するfirebaseデータ反復処理し、必要なすべての情報を表示する表示されません。私が問題を抱えているのは、それをクリックすると、各カードIDをコンソールに取得する方法です。私はこの機能で試しました

function showproductpage(){ 

console.log("Product clicked") 

console.log(this.id); 
} 

この機能はコンソールで「製品がクリックされました」と表示され、idは未定義と識別されます。私は間違って何をしていますか、カードのファイヤーベースIDを表示するためにどうすれば修正できますか？

Answer 1

パラメータとしてDOM要素への参照をshowproductpage()関数に送ることができるので、更新された呼び出しはshowproductpage(this)になります。

function showproductpage(element) { 
 
    console.log(element.id) 
 
}

<div class="card" onclick="showproductpage(this);" id="card_01">Click</div>

function showproductpage() { 
 
    console.log(event.target.id) 
 
}

<div class="card" onclick="showproductpage();" id="card_01">Click</div>