How to replace images in 2nd page when an anchor from 1st page was clicked ? in JavaScript-CodePudding

I have 2 two pages in my website. Page 1 contains few images and page 2 containers another few images. When I click on a particular image in page 1 I want to change all images in page 2. I am able to redirect to the page 2 but couldn't make changes affect.Please help.

--Page 1 --

<div class="container collections-cont">
<a href="#"><img src="images/collections/b.jpeg" /></a>
<a href="#"><img src="images/collections/c.jpeg" /></a>
<a href="#"><img src="images/collections/d.jpeg" /></a>
<a href="#"><img src="images/collections/e.jpeg" /></a>
</div>

--Page 2 --

   <div class="vertical-suba">
      <img src="../images/collections/a.jpeg">
      <img src="../images/collections/b.jpeg">
      <img src="../images/collections/c.jpeg">
      <img src="../images/collections/d.jpeg">
      <img src="../images/collections/e.jpeg">
    </div>

-- JavaScript --

let colImgRed=document.querySelectorAll(".collections-cont a");
let vertImg=document.querySelectorAll(".vertical-suba img");
let newProImg=["images/collections/f.jpeg","images/collections/g.jpeg","images/collections/h.jpeg","images/collections/i.jpeg","images/collections/j.jpeg",]
let i;

colImgRed[0].onclick=function(){
  
  for(i=0;i<vertImg.length;i  ){
    vertImg[i].src=newProImg[i];
  }
  
  location.href="html/product.html";
}

CodePudding user response：

Obvious such dynamic replacement cannot work across static pages. You could set some kind of flag, check for that the flag and if it is set, do the actual replacement on pageload. On the first page :

colImgRed[0].onclick = function() {
  localStorage.setItem('replace', true)
  location.href = 'html/product.html'
}

on the second :

(function() {
  if (localStorage.getItem('replace')) {
    //assuming you have declared the vars as in the question
    for(i=0; i<vertImg.length; i  ) {
      vertImg[i].src = newProImg[i]
    }
    localStorage.removeItem('replace')
  }
})

Completely untested

CodePudding user response：

Well, what i would do is making each anchor have a specific fragment (#), like this

<div class="container collections-cont">
<a href="#b"><img src="images/collections/b.jpeg" /></a>
<a href="#c"><img src="images/collections/c.jpeg" /></a>
<a href="#d"><img src="images/collections/d.jpeg" /></a>
<a href="#e"><img src="images/collections/e.jpeg" /></a>
</div>

And then in your javascript for page 2, checking the fragment and updating your images accordingly

let vertImg = document.querySelectorAll(".vertical-suba img");
let newProImg=["images/collections/f.jpeg","images/collections/g.jpeg","images/collections/h.jpeg","images/collections/i.jpeg","images/collections/j.jpeg",]

switch (location.hash) {
  case "#a":
  for(let i=0;i<vertImg.length;i  ){
    vertImg[i].src=newProImg[i];
  }
  break;
}

What i did here is matching the fragment in a switch statement case "#a": checks if the fragment matches "#a", and if so it changes the images to the new images