CODEWITHSUNDEEP
javascripthtml
Gopichand
Gopichand

Reputation: 48

How to change results in second page by clicking on a image in first page?

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

   



}

Upvotes: 1

Views: 84

Answers (1)

Vakho Nakashidze
Vakho Nakashidze

Reputation: 51

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

Upvotes: 1

Related Questions