Export part of JS function into main.js

Question

Hello Stackoverflow community!

I'm currently in the process of learning by doing by writing a website and I'm unfortunately not sure how to address certain concepts but I will do my best.

I'm using Bootstrap 4 and wrote a website with several sub-pages with an external(?) js-file. Now to my actual question: I have written this js code (A) to show the next image in an array when I click on the "main image" (id:expandedImg) but I can't figure out how to export this code, or what the best practice is. It would be nice to have the Array embedded in the HTML file and the rest in main.js. But since I refer to the variable imagesArr I'm not sure how to do that.

(A)

//Array of img

const imagesArr = [{
            image: '###',
            alt: 'nr1',
        },
        {
            image: '###',
            alt: 'nr2',
        },
        {
            image: '###',
            alt: 'nr3'
        },
    ];

    const createImage = (image, alt, index) => {
        return `<img src="${image}" alt="${alt}" class="img-thumbnail border-0 img-thumbnail-desktop" onClick="expandingImage(this)" currentimage="${index}"/>`;
    };


    // Logic, this should be exported to main.js


    const createImages = (images) => {
        let final = '';
        for (let i = 0; i < images.length; i++) {
            const e = images[i];
            final += createImage(e.image, e.alt, i);
        }
        return final;
    }

    document.addEventListener("DOMContentLoaded", function () {
        console.log('Loaded')

        const container = document.querySelector('.thumbnailContainer');

        container.innerHTML = createImages(imagesArr)
    });

    const nextImage = (img) => {
        const current = +img.getAttribute('currentimage');
        if (current < imagesArr.length - 1) {
            img.setAttribute('src', imagesArr[current + 1].image)
            img.setAttribute('currentimage', current + 1)
        }
    }

    function expandingImage(imgs) {
        const expandImg = document.getElementById("expandedImg");
        const imgText = document.getElementById("imgtext");
        expandImg.src = imgs.src;
        imgText.innerHTML = imgs.alt;
        expandImg.setAttribute("currentimage", imgs.getAttribute('currentimage'))
        expandImg.parentElement.style.display = "block";
    }

I could embed this just in every subpage and it will work, but I'm pretty sure that this would be bad code...

My second question is if I can have a js-function to fill or refer to certain img-src. For example when I have this HTML code (B) if I can somehow copy-paste or refer to the const I declared as js-code, so I don't have to write basically the same thing twice.

(B)

<div class="thumbnailContainer">
<img src="#####" alt="nr1" class="img-thumbnail border-0 img-thumbnail-desktop" onclick="expandingImage(this);">
<img src="#####" alt="nr2" class="img-thumbnail border-0 img-thumbnail-desktop" onclick="expandingImage(this);">
<img src="#####" alt="nr3" class="img-thumbnail border-0 img-thumbnail-desktop" onclick="expandingImage(this);">

This problem is surely trivial but I'd be really thankful if you guys can help me out. I'll try my best on my own but it would be glad to know what the best practice is, in this kind of situation.

Have a good day/evening!

K

Answer 1

Why don't you just embed the code without imagesArr in the main.js, and the imagesArr you can declare separately in <script> tags in the header or footer before importing main.js ?

Simply change this in the code so if the container doesn't exist, it doesn't run into an error.

document.addEventListener("DOMContentLoaded", function() {
  console.log('Loaded')

  const container = document.querySelector('.thumbnailContainer');
  if (container) {
    container.innerHTML = createImages(imagesArr)
  }
  
  this.removeEventListener('DOMContentLoaded',arguments.callee,false);
});

Can you elaborate more on the second question?