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