Adding incrementing classname in array - JavaScript

Question

I would like to do this automaticaly (exp I would like to have an array which contains modal-bg1 to modal-bg9...), is there a way to do it? :

var modalBtn = [document.querySelectorAll(".activeModal1"), document.querySelectorAll(".activeModal2")];
var modalBg = [document.querySelector(".modal-bg1"), document.querySelector(".modal-bg2")];
const prevBtn = [document.querySelector("#prevBtn1"), document.querySelector("#prevBtn2")];
const nextBtn = [document.querySelector("#nextBtn1"), document.querySelector("#nextBtn2")];
const carouselSlide = [document.querySelector(".carousel-slide1"), document.querySelector(".carousel-slide2")];
const carouselImages = [document.querySelectorAll(".imgSlide1"),document.querySelectorAll(".imgSlide2")];

Answer 1

A better way to handle multiple modals is to let each button know how to query for its own modal ie data-controls . You can then provide an index eg data-index to get the correct modal.

All your queries to get the buttons and slides should be relative to the current modal.

 const handleClick = e => { const btn = e.target, index = parseInt(btn.dataset.index, 10), modal = document.querySelectorAll(btn.dataset.controls)[index]; document.querySelectorAll('.modal').forEach(currModal => currModal.classList.toggle('active', currModal === modal)); // Relative queries const carouselSlide = modal.querySelector('.carousel-slide'), carouselImages = modal.querySelector('.carousel-images'), prevBtn = modal.querySelector('.prev-btn'), nextBtn = modal.querySelector('.next-btn'); }; document.querySelectorAll('.modal-btn').forEach(btn => btn.addEventListener('click', handleClick));

 body { display: flex; flex-direction: column; }.modal { display: none; width: 10em; height: 6em; border: thin solid grey; padding: 0.25em; }.modal-background { display: flex; flex-direction: column; flex: 1; }.carousel-slide { display: flex; flex: 1; background: grey; }.carousel-images { display: flex; flex: 1; justify-content: center; font-size: 3em; color: lightgrey; }.modal-buttons { display: flex; justify-content: space-between; margin-top: 0.25em; }.modal.active { display: flex; }

 <div> <button class="modal-btn" data-controls=".modal" data-index="0">Show 1</button> <button class="modal-btn" data-controls=".modal" data-index="1">Show 2</button> <button class="modal-btn" data-controls=".modal" data-index="2">Show 3</button> </div> <hr /> <div class="modal"> <div class="modal-background"> <div class="carousel-slide"> <div class="carousel-images">#1</div> </div> <div class="modal-buttons"> <button class="prev-btn">Prev</button> <button class="next-btn">Next</button> </div> </div> </div> <div class="modal"> <div class="modal-background"> <div class="carousel-slide"> <div class="carousel-images">#2</div> </div> <div class="modal-buttons"> <button class="prev-btn">Prev</button> <button class="next-btn">Next</button> </div> </div> </div> <div class="modal"> <div class="modal-background"> <div class="carousel-slide"> <div class="carousel-images">#3</div> </div> <div class="modal-buttons"> <button class="prev-btn">Prev</button> <button class="next-btn">Next</button> </div> </div> </div>

Answer 2

This function will take the selector and the amount and generate an array:

function createArray(selector, count) {
    var current = 0;
    var arr = []
    while (++current < count) {
        arr.push(document.querySelector(selector.replace(/\{#\}/g, current)));
    }
    return arr;
}

In the selector {#} will be replaced with the number:

var modalBtn = createArray(".activeModal{#}");

---

EDIT: If you want to have all elements with class .activeModal followed by any number, you can simply use the attribute starts with selector:

var modalBtn = document.querySelectorAll('[class^="activeModal"]');

That will return a list of all elements.