I need help with a website issue involving two pages. Page 1 features a few images, while page 2 contains another set of images. My goal is to change all the images on page 2 when a specific image on page 1 is clicked. I am able to redirect to page 2 successfully, but I am struggling to make the changes take effect. Any assistance would be greatly appreciated.
--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";
}