Some dynamic way to select Ids with Javascript

Question

I would like to know a possibility of an algorithm for me to select a DOM in a more dynamic way, without having to use the getElementById every time.

I would like to select all the elements and manipulate in JS. Can anyone help me in this, please?

<section id="step00" class="slide">        
</section>

<section id="step01" class="slide">        
</section>

In fact, I’m trying to display and hide the steps with each click. Like Step By Step.

Imagine I have to do all this:

const step00 = document.getElementById('step00')
const step01 = document.getElementById('step01')
const step02 = document.getElementById('step02')
const step03 = document.getElementById('step03')
const step04 = document.getElementById('step04')
const step05 = document.getElementById('step05')
const step06 = document.getElementById('step06')
const step07 = document.getElementById('step07')
const step08 = document.getElementById('step08')
const step09 = document.getElementById('step09')
const step10 = document.getElementById('step10')
const endTutorial = document.getElementById('endTutorial')

function initTutorial() {
    showStep00()
}

function showStep00() {
    console.log('Inicio o passo 0')
    step00.removeAttribute('hidden')
    step01.setAttribute('hidden', 'true')
}

function showStep01() {
    console.log('Inicio o passo 1')
    step00.setAttribute('hidden', 'true')
    step01.removeAttribute('hidden')
}

There must be something more dynamic, where when I click a button with onclick="step03", for example, all other buttons are hidden.

Answer 1

Can use document.querySelectorAll(".slide") to create a list of nodes with all elements with the class .slide. To select an element from the list, you take the element index from the list of nodes. For example, to select the first one you use the index [0]:

document.querySelectorAll(".slide")[0];

You will no longer need ids, and may even remove them if he was only using them for that purpose.

In your case, a generic function that can be applied to all elements of the list:

function showStep(i) {
    console.log('Inicio o passo 0')
    slides[i].removeAttribute('hidden')
    slides[i+1].setAttribute('hidden', true)
}

Where the parameter i is the index of the element in the node list. The i+1 will select the next element.

Would look like this:

let slides = document.querySelectorAll(".slide");
function initTutorial() {
    showStep(0)
}

function showStep(i) {
    console.log('Inicio o passo '+(i+1))
    slides[i].removeAttribute('hidden')
    // verifico se o próximo elemento existe
    if(i+1 < slides.length) slides[i+1].setAttribute('hidden', true)
}

An example to illustrate:

let slides = document.querySelectorAll(".slide");
function initTutorial() {
    showStep(0)
}

function showStep(i) {
    console.log('Inicio o passo '+(i+1))
    slides[i].removeAttribute('hidden')
    // verifico se o próximo elemento existe
    if(i+1 < slides.length) slides[i+1].setAttribute('hidden', true)
}

initTutorial();

<section hidden class="slide">  
   Passo 1     
</section>

<section class="slide">      
   Passo 2
</section>
<button onclick="showStep(1)">Passo 2</button>