I want to show product details in an e commerce website. when I click on a product it should go to second page which is details page, in that I want to show details of that particular product clicked. It should work for all products in the first page. Please help me.
--Page 1 Html--
<div class="cont">
<a href="page2.html" onclick="proGallery(this)"><img src="product-gallery/a.jpeg"></a>
<a href="page2.html" onclick="proGallery(this)"><img src="product-gallery/f.jpeg"></a>
</div>
--Page2 Html--
<section>
<div class="wrapper">
<div class="product-images">
<img>
<img>
<img>
<img>
<img>
</div>
<div class="result" ><img></div>
</div>
</section>
Javascript
function proGallery(x){
let imageSrc=x.getAttribute("src");
let pics=document.querySelectorAll(".product-images img");
if(imageSrc=="product-gallery/a.jpeg"){
open("page2.html");
pics[0].src="product-gallery/a.jpeg";
pics[1].src="product-gallery/b.jpeg";
pics[2].src="product-gallery/c.jpeg";
pics[3].src="product-gallery/d.jpeg";
pics[4].src="product-gallery/e.jpeg";
}
if(imageSrc=="product-gallery/b.jpeg"){
open("page2.html");
pics[0].src="product-gallery/f.jpeg";
pics[1].src="product-gallery/g.jpeg";
pics[2].src="product-gallery/h.jpeg";
pics[3].src="product-gallery/i.jpeg";
pics[4].src="product-gallery/j.jpeg";
}
}
The problem here is that x inside your function refers to link element rather then img. That's why x.getAttribute("src") will try to get src attribute from the link, not the image. I would write like this:
<div class="cont">
<a href="page2.html?product=1"><img src="product-gallery/a.jpeg"></a>
<a href="page2.html?product=2"><img src="product-gallery/f.jpeg"></a>
</div>
And in JS:
let product = location.search.split('=')[1];
if(product){
let pics=document.querySelectorAll(".product-images img");
if(product=="1"){
pics[0].src="product-gallery/a.jpeg";
pics[1].src="product-gallery/b.jpeg";
pics[2].src="product-gallery/c.jpeg";
pics[3].src="product-gallery/d.jpeg";
pics[4].src="product-gallery/e.jpeg";
}else if(product="2"){
pics[0].src="product-gallery/f.jpeg";
pics[1].src="product-gallery/g.jpeg";
pics[2].src="product-gallery/h.jpeg";
pics[3].src="product-gallery/i.jpeg";
pics[4].src="product-gallery/j.jpeg";
}
}