Tips for updating images on the second page after clicking on a link from the first page using JavaScript

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

         

Answer №1

My approach would be to assign a specific fragment (#) to each anchor element, like so

<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>

In your JavaScript for page 2, you can then check the fragment and update the 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;
}

This method involves using a fragment in a switch statement case "#a": checks if the fragment matches "#a", and updates the images to the new ones

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What steps can be taken to resolve the issue of not being able to convert 'float [6]' to float during assignment?

I have encountered an error in my code below, and I'm struggling to resolve it. The error message reads: [Error] cannot convert 'float [6]' to float in assignment. I am unsure about what needs to be done or what should be included in the pro ...

What is causing the conversion of integers to strings when I make a POST request using jquery.ajax to a PHP script

I've been struggling for the past hour trying to solve this issue with no success. Despite reading numerous posts on Stack Overflow related to jQuery and ajax(), I haven't found a solution that addresses my specific problem. Here is an overview ...

Fetching post data from an HTML form in Node.js using Express 4: A comprehensive guide

This is the content of my main.js file: var express = require("express"); var app = express(); var bodyParser = require("body-parser"); var userAPI = express.Router(); app.use(express.static(__dirname + '/public')); app.use( bodyParser.json() ) ...

Adjusting the filter location in React-admin

This is the common method of implementing filters in react-admin https://i.stack.imgur.com/M8yq7.png However, in my particular scenario, I require the filters to be inside each column heading. For example: https://i.stack.imgur.com/GU2Pz.png The filter ...

Customize the CloseIconButton in Material-UI Autocomplete for a unique touch

Hello everyone, I have a simple dilemma. I am trying to implement a custom closeIconButton, but the only available prop is closeIcon. However, this prop is not sufficient because I need this custom button to also have an onClick property. If I add the onC ...

React: Implementing a blur effect on the background when a Material-UI Dialog is

Is it possible to apply a blur effect to the background content when displaying an MUI dialog? (the default behavior is darkening the background, but I specifically need it blurred). I am aiming for something like this: https://i.sstatic.net/lnTVQ.jpg ...

Form Validation Using a Separate Function

Currently, I am utilizing the jQuery Validation plugin from http://jqueryvalidation.org/ to validate my forms. By default, the validation process is triggered when the form is submitted. However, I would like to initiate the validation when a specific func ...

What purpose does Webpack serve in injecting React?

Within my webpack entry file, I have the following code snippet: import ReactDOM from 'react-dom'; import Layout from './components/Layout'; // ... dialog = document.createElement("dialog"); ReactDOM.render(<Layout dialog={dialog} ...

Setting a scope variable in an isolate scope from a link function can be achieved by accessing the

In my attempt to assign a variable within an isolate scope, I am encountering difficulties accessing the variable set in the linked function. Surprisingly, I can access the controller's variable without any issues. app.directive('myDir', fu ...

Error in Adding Items to React To-Do List

As I work on creating a React todo app following a tutorial, I have encountered an issue. Despite having components and context files set up, the addItem function does not render the item and date into the todo list when the 'Add todo' button is ...

Guide for implementing pagination on a lengthy list with React MaterialUI

I'm currently working on a project using react and MaterialUI to create a list with filter functionality. The list will be populated with data from an Http request and may contain a large number of items. I was researching pagination in the MaterialUI ...

The intricacies of the Jscript ReadLine() function

I am trying to figure out how to read the complete content of a .txt file using JavaScript. I know that ReadLine() can be used to read a specific line from a file, but I need a method that will allow me to read the entire contents of the file. I have searc ...

What could be the reason for this code continuously changing elements within the char array during each iteration?

I am working on developing a hangman game. I have initialized a character array with placeholders for the correct letters and then prompt the user to input a character. If the user's character matches any of the characters in the predetermined word, i ...

What is the process for reading server responses following the delivery of an alert to a designated user through socket.io?

Recently, I started exploring Socket.io and encountered an interesting challenge. My goal is to retrieve real-time location data from an Android device. To achieve this, I developed a basic application to access the current GPS coordinates. Additionally, I ...

Replicating DIV element with input field

Once again, I find myself stuck in my attempt to duplicate a DIV and its form elements using jQuery. Button: <div class="addNew" id="addSkill">Add Skill <i class="icon-plus"></i></div> This is the Div and contents that I want to ...

Generating a dynamic JSON file with an array type object in Python

I am attempting to dynamically create a JSON file with some array objects as shown below: { "timestamp": "Timestamp", "year":"2020" "actions": { "copy": { "id": [1,2] ...

Properly passing JSON data arrays to an MVC controller: best practices and techniques

The JSON structure I intend to pass into an MVC 5 controller is as follows: var searchInputs = { "Id": [ "1", "2" ] }; It's a simple array of strings named Id. I have designed a class to handle this array. public class SearchList { public Sear ...

The buttons in the Bootstrap modal are unresponsive

I'm attempting to create a modal navigation bar for mobile view but encountering an issue. When I click on the icon bar or menu bar in mobile view, none of the buttons inside the modal are responding. I'm quite stuck on this and would appreciate ...

Troubleshooting issue: Jquery keypress function not functioning as expected in conjunction

I'm completely lost. The code below is just my latest attempt at solving this issue: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>{{title}}</title> <link rel="stylesheet" hre ...

Revamping Legacy React Native Projects with the Redux Toolkit

Is there a way to integrate redux toolkit with the existing store, reducer, and dispatch methods in my project without creating new ones? I am looking to update react-redux to the latest version. Please provide guidance and assistance. store.js ` import ...