Com base nos conhecimentos do curso, eu procurei criar uma mesa de som com áudios de memes conhecidos. Durante o projeto, algo me deixou curioso ao trabalhar com JS.
Quando fiz a referência com o uso de 'const' ou 'var' dentro do loop FOR, os resultados foram diferentes. Neste caso, a alternativa correta é utilizar 'const' ao criar referências de elementos no JScript dentro do FOR.
- Uso de const : Funciona perfeitamente. Cada tecla ao ser clicada emite seu respectivo áudio.
- Uso de var : Não funciona como esperado. Qualquer tecla ao ser clicada emite o último áudio (class '.bad_total').
Gostaria de saber, portanto: Por que essa diferença acontece?
Código HTML ----------------------------------------
<!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">
<link rel="shortcut icon" href="image/icons8-midi-96.png" type="image/x-icon">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
<title>GAmidi</title>
</head>
<body>
<header>
<h1 class="titulo-principal">
GA midi
</h1>
</header>
<section class="mesa-de-som">
<button class="tecla bora_bill">bora bill</button>
<button class="tecla bora_fi">bora fi</button>
<button class="tecla bora_mulher">bora muié</button>
<button class="tecla faro_tome">tome</button>
<button class="tecla faro_papelao">papelão</button>
<button class="tecla faro_filho">filho calma</button>
<button class="tecla luva_receba">receba!</button>
<button class="tecla instinto_superior">inst. superior</button>
<button class="tecla bad_total">sem proprey</button>
</section>
<div class="botao-run">
<button onclick="tocaRun()" class="run">
<img title="RUN" src="image/icons8-run-67.png">
</button>
</div>
<!-- AUDIOS -->
<audio src="audio/bora-bill.mp3" id="som_bora_bill"></audio>
<audio src="audio/bora-filho-do-bill.mp3" id="som_bora_fi"></audio>
<audio src="audio/bora-mulher-do-bill.mp3" id="som_bora_mulher"></audio>
<audio src="audio/tome.mp3" id="som_faro_tome"></audio>
<audio src="audio/que-papelao.mp3" id="som_faro_papelao"></audio>
<audio src="audio/filho-calma.mp3" id="som_faro_filho"></audio>
<audio src="audio/receba.mp3" id="som_luva_receba"></audio>
<audio src="audio/instinto-superior.mp3" id="som_instinto_superior"></audio>
<audio src="audio/bad-total.mp3" id="som_bad_total"></audio>
<audio src="audio/run.mp3" id="som_run"></audio>
<script src="main.js"></script>
</body>
</html>Código JScript (uso de const) ---------------------------------------
function tocaRun() {
document.querySelector("#som_run").play();
}
const listaDeMemes = document.querySelectorAll(".tecla");
function tocaSom(idAudio) {
document.querySelector(idAudio).play();
}
for(i = 0; i < listaDeMemes.length; i++) {
const botoes = listaDeMemes[i];
const meme = botoes.classList[1];
const idAudio = `#som_${meme}`;
botoes.onclick = function() {
tocaSom(idAudio);
}
}Código JScript (uso de var) ---------------------------------------------
function tocaRun() {
document.querySelector("#som_run").play();
}
const listaDeMemes = document.querySelectorAll(".tecla");
function tocaSom(idAudio) {
document.querySelector(idAudio).play();
}
for(i = 0; i < listaDeMemes.length; i++) {
//está aqui a diferença
var botoes = listaDeMemes[i];
var meme = botoes.classList[1];
var idAudio = `#som_${meme}`;
botoes.onclick = function() {
tocaSom(idAudio);
}
}Desde já, agradeço seu tempo em ler o tópico :)
