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

Quando aperto enter a tecla não fica vermelha (ativa)

Referente ao curso JavaScript para Web: Crie páginas dinâmicas

por Yasmin Moura De Lima Narciso
| 28.2k xp | 2 posts
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 i = 0; i < listaDeTeclas.length; i++){

    const tecla = listaDeTeclas[i]; 
    const som = tecla.classList[1];
    const idAudio = `#som_${som}`;

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

    tecla.onkeydown = function (evento) {

        if (evento.code === 'Enter' || evento.code === 'Space') {
            tecla.classList.add('ative');
        }  
    }

    tecla.onkeyup = function () {
        tecla.classList.remove('ative');
    }
}

Esse é o meu código e por algum motivo quando eu clico enter a tecla selecionada pelo tab não fica vermelha (ativa) mas quando eu clico Espaço funciona normalmente

2 respostas
solução!
por Iury Gontijo Silva
| 247.9k xp | 320 posts

Olá, Yasmin! Tudo bom com você?

Aqui nessa parte do seu código, você for pressionado 'Enter' ou 'Space' em alguma das teclas, seja adicionada a classe 'ative' no elemento, que o que vai adicionar o estilo de clique. tecla.onkeydown = function (evento) {


        if (evento.code === 'Enter' || evento.code === 'Space') {
            tecla.classList.add('ative');
        }  
    }

    tecla.onkeyup = function () {
        tecla.classList.remove('ative');
    }

Porém, lá no CSS, a classe responsável por fazer com que o elemento fique com esse estilo, é a classe 'ativa'. Então, se você fizer essa alteração, deve funcionar normalmente. Ficaria dessa forma: tecla.onkeydown = function (evento) {

if (evento.code === 'Enter' || evento.code === 'Space') {
    tecla.classList.add('ativa');
}  
}

tecla.onkeyup = function () {
tecla.classList.remove('ativa');
}

Espero ter ajudado e agradeceria muito se marcasse minha resposta como solução pra sua dúvida, caso tenha sido o caso! Abraços e bons estudos!

por Yasmin Moura De Lima Narciso
| 28.2k xp | 2 posts

Muito obrigada!