Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

[Dúvida] Dúvida sobre a constante instrumento = class.list [1]

Referente ao curso JavaScript para Web: Crie páginas dinâmicas, no capítulo Iterando em listas e atividade Textos dinâmicos

por Gabriel da Silva Antunes
| 65.3k xp | 3 posts

Fiquei em dúvida do porquê na constante instrumento o class.list leva o número 1 com parâmetro, não deveria ser 0 para ser referente ao primeiro item da lista?

function tocaSom (idElementoAudio) {

document.querySelector(idElementoAudio).play();

}

const listaDeTeclas = document.querySelectorAll('.tecla');

let contador = 0;

//enquanto while (contador < listaDeTeclas.length) {

const tecla = listaDeTeclas[contador];
const instrumento = tecla.classList[1];

//template string js
const idAudio = `#som_${instrumento}`

tecla.onclick = function(){
    tocaSom(idAudio);
}

contador = contador + 1;

}

2 respostas
solução!
por Nicolas Henrique de Souza
| 40.8k xp | 7 posts

Boa tarde, Gabriel! O array "tecla.classList" na verdade se refere à lista de classes CSS de cada uma das teclas. Ele está sendo utilizado para identificar o instrumento de uma dada tecla:

    <section class="teclado">
        <button class="tecla tecla_pom">Pom</button> <!--> Como você pode ver, a segunda classe é a que identifica o instrumento da tecla <-->
        <button class="tecla tecla_clap">Clap</button>
        <button class="tecla tecla_tim">Tim</button>

        <button class="tecla tecla_puff">Puff</button>
        <button class="tecla tecla_splash">Splash</button>
        <button class="tecla tecla_toim">Toim</button>

        <button class="tecla tecla_psh">Psh</button>
        <button class="tecla tecla_tic">Tic</button>
        <button class="tecla tecla_tom">Tom</button>
    </section>

Como a classe que identifica o elemento é a segunda classe da lista, ela é acessada utilizando tecla.classList[1].

Espero ter ajudado a esclarecer a sua dúvida!

por Gabriel da Silva Antunes
| 65.3k xp | 3 posts

Ah sim, não tinha me atentado a lista de classes do CSS, muito obrigado!