Can I place "getElementById" in an array?-CodePudding

I'm new to JS so I have been writing code the most simple way possible for me just to get the functionality that I want the plan being clean it up and shorten everything later.

Part of doing this I have loads of classes to select a series of elements by their id. Is it possible to put these in an array? all the elements are numbered 1-12

Essentially I have three items to get a slide its accompanying audio and subtitle

const slide0 = document.getElementById("slide0");
const slide1 = document.getElementById("slide1");
const slide2 = document.getElementById("slide2");
const slide3 = document.getElementById("slide3");
const slide4 = document.getElementById("slide4");
const slide5 = document.getElementById("slide5");
const slide6 = document.getElementById("slide6");
const slide7 = document.getElementById("slide7");
const slide8 = document.getElementById("slide8");
const slide9 = document.getElementById("slide9");
const slide10 = document.getElementById("slide10");
const slide11 = document.getElementById("slide11");
const slide12 = document.getElementById("slide12");

const subt1 = document.getElementById("sub1");
const subt2 = document.getElementById("sub2");
const subt3 = document.getElementById("sub3");
const subt4 = document.getElementById("sub4");
const subt5 = document.getElementById("sub5");
const subt6 = document.getElementById("sub6");
const subt7 = document.getElementById("sub7");
const subt8 = document.getElementById("sub8");
const subt9 = document.getElementById("sub9");
const subt10 = document.getElementById("sub10");
const subt11 = document.getElementById("sub11");
const subt12 = document.getElementById("sub12");
    
const chp1 = document.getElementById("audiochp1");
const chp2 = document.getElementById("audiochp2");
const chp3 = document.getElementById("audiochp3");
const chp4 = document.getElementById("audiochp4");
const chp5 = document.getElementById("audiochp5");
const chp6 = document.getElementById("audiochp6");
const chp7 = document.getElementById("audiochp7");
const chp8 = document.getElementById("audiochp8");
const chp9 = document.getElementById("audiochp9");
const chp10 = document.getElementById("audiochp10");
const chp11 = document.getElementById("audiochp11");
const chp12 = document.getElementById("audiochp12");

CodePudding user response：

Yes, you can. For example:

let slides = [];
for (let i = 0; i < num_slides; i  ) {
    slides.push({
        slide: document.getElementById(`slide${i}`),
        subt: document.getElementById(`sub${i}`),
        chp: document.getElementById(`audiochp${i}`)
    });
}

You could, however, also do something similar by giving your elements classes and then using document.getElementsByClassName('slide') and so on.

CodePudding user response：

Surely! I highly advise you to generate a few helper functions for this. Take a look at the following example:

function getSlides(theMaxSlideNumer) {
  const returnElements = [];
  for (int i = 0; i <= theMaxSlideNumber; i  ) {
    const aSlideQuery = "#slide"   i.toString(); 
    returnElements.push(document.querySelector(aSlideQuery));
  }
  return returnElements;
}

const slides = getSlides(12);

Add safeguard

function getSlides(theMaxSlideNumer) {
  const returnElements = [];
  for (int i = 0; i <= theMaxSlideNumber; i  ) {
    const aSlideQuery = "slide"   i.toString(); 
    returnElements.push(document.querySelector(aSlideQuery));
  }

  returnElements.forEach((aElement)=>{
    if (aElement === null) console.warn("A dom element could not be found, trace this message!");
  });
  return returnElements;
}

const slides = getSlides(12);