Some dynamic way to select IDs with Javascript

Question

Some dynamic way to select IDs with Javascript

Navigation

#1 by (1 votes)

1

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 getElementById all the time.

I'd like to select all elements and manipulate in JS. Can someone help me with this, please?

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

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

Actually, I'm trying to display and hide the steps with each click. Type 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.

javascript html front-end

asked by anonymous 11.07.2018 / 21:00

1 answer

Display image within div How to dynamically get a specific day in a query

score 1 · Accepted Answer

You can use document.querySelectorAll(".slide") to create a list of nodes with all elements with class .slide . To select an element from the list, you pick it up by the index of the element in the node list. For example, to select the first you use the index [0] :

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

You will no longer need% s of% s, and may even remove them if you were just 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 id parameter is the index of the element in the node list. The i will select the next element.

It 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>