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");
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.
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);
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);
Target them using querySelectorAll and spread them into an array.
[...document.querySelectorAll('[id^=slide]')] // CSS selector that captures all elements starting with slide word
Repeat for each group you have.