No termino do curso, notei que quando eu mantenho pressionada a tecla ESPAÇO e aperto TAB fica selecionado(pintado de vermelho) os quadrados em questão. Fiquei um pouco intrigado sobre o porquê desse comportamento. Alguém ajuda?
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
No termino do curso, notei que quando eu mantenho pressionada a tecla ESPAÇO e aperto TAB fica selecionado(pintado de vermelho) os quadrados em questão. Fiquei um pouco intrigado sobre o porquê desse comportamento. Alguém ajuda?
Boa noite.
Coloca seu código aí pra gente dar uma olhada :)
function tocaSom(seletorElemento){
const elemento = document.querySelector(seletorElemento);
if(elemento && elemento.localName === 'audio'){
elemento.play();
}
else{
console.log('Elemento não encontrado ou seletor inválido');
}
}
const listaDeTeclas = document.querySelectorAll('.tecla');
for(let contador = 0; contador < listaDeTeclas.length; contador++){
const tecla = listaDeTeclas[contador];
const instrumento = tecla.classList[1];
//Template String
const idAudio = `#som_${instrumento}`;
tecla.onclick = function(){
tocaSom(idAudio);
}
tecla.onkeydown = function(evento) {
if(evento.code === "Space" || evento.code === 'Enter'){
tecla.classList.add('ativa');
}
}
tecla.onkeyup = function(){
tecla.classList.remove('ativa');
}
}
Boa noite. O mesmo acontece se você segurar o ESPAÇO e clicar em outro botão. O que acontece e que quando o 'tecla.onkeyup' e ativado o foco já esta em outro botão e ele tenta remover a classe 'ativa' de onde esta o foco no momento. Como nenhum botão precisa permanentemente ficar com a classe 'ativa', podemos buscar por qualquer elemento que tenha a classe 'ativa' e remover a classe.
tecla.onkeyup = function(){
document.querySelector('.ativa')?.classList.remove('ativa');
}
Boa noite! Agradeço aos colegas Victor Cordeiro Fraguas Pires e William andrade de souza pela ajuda. Sou novo no forum e estou aprendendo a usar as ferramentas daqui. Dúvida sanada. Mais uma vez, obrigado!