フォーム新しいhtmlページに移動するアクションが機能していません

Question

商品検索結果ページ（html1ファイル）があります。商品のいずれかをクリックして商品詳細ページ（Product_overview。 html）。

積結果

は、私は、製品のdivのクリックしたとき、それはにページをリダイレクトしません

function showdetail(element){ 
    var productID = element.id; 
    alert(productID); 
    var currentUrl = window.location.href; 
    url = currentUrl + encodeURIComponent(productID); 
    document.location.href = url; 
} 

ローカルストレージをチェックするために、このfirebaseコード

var itemdetailref = Cataloguedatabase.ref('/Listings/'); 

     return itemdetailref.once('value').then(function(snapshot){ 
      snapshot.forEach(childSnapshot => { 
       let key = childSnapshot.key; 
       //use ES6 includes function 
       if(key.includes(searchcontent)){ 
        var searchresults = childSnapshot.val(); 
        var container = document.getElementById("searchcontainer"); 
        var productcard = ` 
         <div action='../html/Product_overview.html' class="product" id="${key}" method='GET' onclick="showdetail(this);" name="product-view" role="search"> 
          <div class="img-container"> 
          <img src=${searchresults.ProductImageUrl}> 
          </div> 
          <div class="product-info"> 
          <div class="product-content"> 
           <span class="button" id="price">${searchresults.Price}</span> 
          </div> 
          </div> 
         </div>`               
        container.innerHTML += productcard; 
       } else { 
        console.log("No match was found"); 
       } 
      }); 
     }) 

と、関数によって生成され、 Product_overview.htmlをdivアクションに追加します。私はdivを変更して、何も変わらないようにしてみました。私は間違って何をしているのですか？これをどのように修正できますか？

Answer 1

アクション属性は、フォーム要素に対してのみ機能します。 divの中にフォームを入れたり、目的のURLを示すアンカータグを入れたりできます。