Problem with adding multiple images to the elements (javascript loop Issue)

Question

I would like to add multiple photos from the Array in this code to the elements, but it adds just one photo from the Array to the first Element. I tried adding for loop, but I dont know where to start and where to end the loop. Could you please take a look to the code using the link (codepen)? thank you

let zoomLevel = 1;

const images = [
    {
        thumb: 'http://localhost:8080/links/works/Print/001.webp',
        hires: 'http://localhost:8080/links/works/Print/001.webp'
    },
    {
        thumb: 'https://tasvir-graphic.de/links/works/digital/unterwelt.webp',
        hires: 'https://tasvir-graphic.de/links/works/digital/unterwelt.webp'
    }
]

// set to random image
let img = images[Math.floor(Math.random() * images.length)];

image.getElementsByTagName('a')[0].setAttribute('href', img.hires);
image.getElementsByTagName('img')[0].setAttribute('src', img.thumb);

const preloadImage = url => {
    let img = new Image();
    img.src = url;
}

preloadImage(img.hires);

const enterImage = function(e) {
    zoom.classList.add('show', 'loading');
    clearTimeout(clearSrc);
    
    let posX, posY, touch = false;
    
    if (e.touches) {
        posX = e.touches[0].clientX;
        posY = e.touches[0].clientY;
        touch = true;
    } else {
        posX = e.clientX;
        posY = e.clientY;
    }
    

You can check this better using Codepen HERE.

Answer 1

    const image = document.querySelectorAll('.image');
    /* Store the number of all elements with css class 'image' */
    let imageElementsCount = image.length;

    for (index = 0; index < imageElementsCount; index++)
    {
        let arrayElementPos = Math.floor(Math.random() * images.length);

        /* Receive the requested element from array with image objects */
        let imageObject = images[arrayElementPos];

        preloadImage(imageObject.hires);

        /* Assign received image properties to your html element */
        image[index].getElementsByTagName('a')[0].setAttribute('href', imageObject.hires);
        image[index].getElementsByTagName('img')[0].setAttribute('src', imageObject.thumb);

        image[index].addEventListener('mouseover', enterImage);
        image[index].addEventListener('touchstart', enterImage);

        image[index].addEventListener('mouseout', leaveImage);
        image[index].addEventListener('touchend', leaveImage);

        image[index].addEventListener('mousemove', move);
        image[index].addEventListener('touchmove', move);

        image[index].addEventListener('wheel', e =>
        {
            e.preventDefault();
            e.deltaY > 0 ? zoomLevel-- : zoomLevel++;

            if (zoomLevel < 1) zoomLevel = 1;
            if (zoomLevel > 5) zoomLevel = 5;

            console.log(`zoom level: ${zoomLevel}`);
            zoom.style.transform = `scale(${zoomLevel})`;
        });
    }

The loop is working until all founded divs got an assignment.

ToDos:

Remove in line

const image = document.querySelectorAll('.image')[0];

the [0].

Next step: Take a look into the body of for loop. Remove your lines of code in your original code