Entrar Ainda não tem acesso?
1
resposta

Erro ao aperta a tecla 'Enter', aperta não ficou vermelho, o Audio funciona. Não sei resolver isso.

Referente ao curso JavaScript para Web: Crie páginas dinâmicas, no capítulo Eventos e lógicas e atividade Mais condições

por Charles Rodrigues Gomes
| 41.9k xp | 3 posts
function tocaSom (seletorAudio) {
  const elemento = document.querySelector(seletorAudio);

  if (elemento == null) {
    //alert('Elemento não encontrado');
    console.log('Elemento não encontrado');

  }

  if (elemento != null) {
    if(elemento.localName === 'audio'){
      elemento.play();
    }
  }
}

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


//while 
//para
for (let contador = 0; contador < ListaDeTeclas.length; contador++) {

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

    const idAudio = `#som_${instrumento}`; //template string
   
    //console.log(idAudio);


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

    tecla.onkeyDown = function (evento) {

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

     
    }

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


    //console.log(contador);


}
1 resposta
por Rafaela Petelin Silvério
| 2024.9k xp | 4645 posts
Alura Scuba Team

Oi, Charles! Como vai?

O erro está em dois pontos pequenos do código: o evento foi escrito como onkeyDown, mas o JavaScript diferencia letras maiúsculas e minúsculas, então o correto é onkeydown. Além disso, dentro do add, foi escrito classeList, mas o correto é classList. Ajuste seu código assim:


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

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

Esse código verifica se a tecla pressionada foi Espaço ou Enter. Se for uma delas, adiciona a classe ativa, deixando o botão com o estilo vermelho. Quando a tecla é solta, o onkeyup remove essa classe. Ao final, verifique também se o arquivo estilos.css está correto, principalmente se a classe .tecla.ativa existe e se as variáveis estão dentro de :root, com dois-pontos antes de root:


:root { 
  --cinza: #aaa;
  --vermelha: #e93d50;
  --vermelha-escura: #af303f;
  --branca: #fff;
  --luz: rgb(229, 255, 0);
}

.tecla.ativa,
.tecla:active {
  background-color: var(--vermelha);
  border: 4px solid var(--vermelha);
  box-shadow: 3px 3px 0 var(--vermelha-escura) inset;
  color: var(--branca);
  outline: none;
}

Espero ter ajudado. Conte com o apoio do Fórum na sua jornada. Fico à disposição.

Abraços e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado

Tópicos relacionados

Mostrar mais tópicos Mostrar menos tópicos

Conteúdos Alura com o tema

Trilhas por carreira

Carreiras de IA

Carreiras de Dados

Carreiras de Cyber

Carreiras de DevOps & Cloud

Carreiras de UX & UI

Carreiras de Mobile & Front-End

Carreiras de Back-End

Carreiras de Negócios

Cursos universitários FIAP

Graduação | Pós-graduação | MBA