form action to direct to a new html page is not working

Question

I have a product search result page (html1 file), i want to be able to click on any of the product and then be directed to product detail page (Product_overview.html).

the product result are generated by this firebase code

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");
                }
            });
        })

and then the function to check for local storage

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

when I click of the product div it does not redirect the page to Product_overview.html in the div action. I tried changing the div to form too nothing changes. What am I doing wrongly and how can I fix this?

Answer 1

The action attribute only works for the form element. You can either nest a form inside your div, or an anchor tag pointing to the desired url.