定向到新的html頁面的表單操作不起作用

Question

我有一個產品搜索結果頁面（html1文件），我希望能夠單擊任何一種產品，然后定向到產品詳細信息頁面（Product_overview.html）。

產品結果由此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");
                }
            });
        })

然后是檢查本地存儲的功能

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

當我單擊產品div時，它不會在div操作中將頁面重定向到Product_overview.html。 我試圖將div更改為沒有任何變化的形式。 我做錯了什么，該如何解決？

Answer 1

action屬性僅適用於form元素。 您可以將表格嵌套在div內，也可以將錨標記指向所需的網址。