Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Por que a constante e não variável (instrumento)

No tópico 4 - Iterando em listas (aula 07), minuto 5:36 é falado que para o código ficar mais legível deve-se ser criado uma constante chamada "Instrumento" para armazenar o nome de uma classe do botão que está sendo trabalho dentro do loop while. Minha dúvida é por que deve ser declarado como uma constante e não como uma variável, uma vez que a cada entrada no loop esse item recebe um valor diferente?

function tocaSom (idElementoAudio) {
    document.querySelector(idElementoAudio).play();
}

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

let contador = 0;

while (contador < listaDeTeclas.length) {

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

    console.log()

    listaDeTeclas[contador].onclick = function () {
        tocaSom ('som_tecla_pom');
    }

    contador = contador + 1;

    console.log(contador);
}
<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Alura MIDI</title>

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600&display=swap" rel="stylesheet">

    <link rel="icon" type="image/png" href="images/bateria.png">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/estilos.css">



</head>
<body>

    <h1>Alura Midi</h1>

    <section class="teclado">
        <button class="tecla tecla_pom">Pom</button>
        <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>

    <audio src="sounds/keyq.wav" id="som_tecla_pom"></audio>
    <audio src="sounds/keyw.wav" id="som_tecla_clap"></audio>
    <audio src="sounds/keye.wav" id="som_tecla_tim"></audio>
    <audio src="sounds/keya.wav" id="som_tecla_puff"></audio>
    <audio src="sounds/keys.wav" id="som_tecla_splash"></audio>
    <audio src="sounds/keyd.wav" id="som_tecla_toim"></audio>
    <audio src="sounds/keyz.wav" id="som_tecla_psh"></audio>
    <audio src="sounds/keyx.wav" id="som_tecla_tic"></audio>
    <audio src="sounds/keyc.wav" id="som_tecla_tom"></audio>

    <script src="main.js"></script>
</body>
</html>
2 respostas

Alguém consegue me ajudar?

solução!

Oioi Klayton, tudo certo?

Te agradeço por você ter esperado para obter um retorno e também por especificar onde sua dúvida foi citada na aula, isso auxilia bastante na resposta.

Seu raciocínio está correto, cada entrada no loop vai fazer com que essa constante receba um valor diferente, no entanto a estrutura base desta instrução(listaDeTeclas[contador].classList[1]) permanece a mesma e se for alterada gera erro na execução, portanto a instrutora optou por manter esse valor numa constante. No loop isso não será um problema, já que a constante instrumento não é declarada novamente e dentro de cada repetição é como se ela estivesse sendo atribuída pela primeira vez.

Espero que tenha tirado sua dúvida e me coloco à disposição caso ainda tenha alguma.

Um abraço e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!