I have coded a small image gallery with a popup [of an image], but now I have to save the user choice of image(s) and email address and store both on screen. Moreover, I have been told to store the popup image(s) and the email in an array; I don't know how to add the popup image to an array.

My codepen of the project.

https://codepen.io/aaron_1986/pen/VwdvqWB

I'm very confused about what you are trying to do. The UX of your gallery is very poor - the actual popup is showing me a smaller image than that in the gallery so not sure why you even want need a popup.

A much simpler way to do this is is with a slider that lets users swipe left and right and select the images they want.

If each image become a checkbox input it easy to then process the data. You can see it working on this calculator I built for someone in South Africa:

https://variants.loanpaymentplugin.com/borrowing-calculator/

On a desktop you have the buttons. On a touch screen it swipes. It also means you can go back a see previous images.

But if you want to stick with your code, you could add selected images to a hidden input using JS. The image key would be a comma separated string which is used to build the attachments hen the form is submitted.

 

Hi, thank-you for the reply, yes the webpage is very poor, but it is a training project for myself

The question I was told to solve was as followed; 'attach an image to an email address and store it in an array?

My first step is to add the image on the popup to an array [of images] and view the results in a gallery next to the main image. Moreover, I can't figure out how to add the existing popup image to a new array of images.

 

Ah, that's a bit different.

This is going to be complicated. Emails are sent serverside. You can't do this locally. Which means you need to use a mail function to attach the image.

And because it's complicated most people just use a script like this:

https://github.com/PHPMailer/PHPMailer

Don't ever try to write your own mail function.

Adding images to an array on the side is equally tricky if you are fetching each image. If you already had the images load and just flipped through them it become much simpler.

 

let selected_images = [];

document.querySelectorAll('.large-image').forEach(function(img, idx) {
  img.src = "" + idx;
  img.addEventListener('click', function({target: src}){
    if(!selected_images.includes(src)) {
      selected_images.push(src);
    }
    //document.getElementById('preview').appendChild(selected_images[0]);
    console.log(selected_images);
  });
 
});

The code above is my code so far. Moreover, the code executes in the console as normal, but when the array image outputs to HTML it replaces the original image.

//POPUP
 const images = [...document.querySelectorAll('.image')];
 const popup = document.querySelector('.popup');
 const closeBtn = document.querySelector('.close-btn');
 const largeImage = document.querySelector('.large-image');
 
 
 images.forEach((item, i) => {
    item.addEventListener('click', (event) => {
        // get the `src` of the clicked image and pass it to the `openPreview` function
        const imageSource = event.target.src
        openPreview(i, imageSource);
        popup.classList.toggle('active');
    })
})

const openPreview = (i, src) => {
    // let path = ``;
    largeImage.src = src;
}

closeBtn.addEventListener('click', () => {
    popup.classList.toggle('active');
})

 

Great but that’s not going to send an email. For that you need a server side mail function.