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

[Dúvida] console - listaDeTeclas

Referente ao curso JavaScript para Web: Crie páginas dinâmicas, no capítulo Listas e atividade Referências

por Thiago Rodrigues Costa
| 21.6k xp | 21 posts

quando abro meu console lista de teclas a msg que aparece é de erro, muito diferente da imagem da aula. alguém pode me ajudar? 28/abril/2023.

Insira aqui a descrição dessa imagem para ajudar na acessibilidade 

<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">
<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>

`

javaScript

function tocaSomPom () { document.querySelector('#som_tecla_pom').play(); }

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

5 respostas
por Lorena Garcia
| 8260.5k xp | 12081 posts
Alura Scuba Team Suporte Educacional

Olá Thiago, tudo bem?

Pelo que pude observar no seu código, o erro está na linha onde você declarou a constante listaDeTeclas. Você utilizou o caractere * em vez do sinal de igual (=) para atribuir o valor retornado pelo método querySelectorAll('.tecla') à constante.

O correto seria:

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

Espero ter ajudado.

Um abraço e bons estudos.

por Thiago Rodrigues Costa
| 21.6k xp | 21 posts

mudei o caractere * pelo = , e o som não saiu não funcionou.

qdo abro o console e digito, tocaSomPom() dou enter, funciona normal.

no Html com on click tbm não funciona. não sei o que fazer , estou AGARRADO nisso

    <button onclik="tocaSomPom()" class="tecla tecla_pom">Pom</button>
solução!
por Lorena Garcia
| 8260.5k xp | 12081 posts
Alura Scuba Team Suporte Educacional

Olá!

Você já avançou até a próxima aula, que é essa aqui? Porque nessa aula a instrutora adiciona mais uma parte de código para fazer o som da tecla pom voltar a sair.

Então o código JavaScript fica assim com as correções:

function tocaSomPom () {
    document.querySelector('#som_tecla_pom').play();
}

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

listaDeTeclas[0].onclick = tocaSomPom;

Essa parte listaDeTeclas[0].onclick = tocaSomPom; atribui a função tocaSomPom ao evento de clique do primeiro elemento HTML da lista listaDeTeclas. Ou seja, quando o primeiro botão que possui a classe tecla é clicado, o som definido na função tocaSomPom será reproduzido.

Espero ter ajudado.

Um abraço e bons estudos.

por Thiago Rodrigues Costa
| 21.6k xp | 21 posts

chega agora na aula, obrigado Lorena

por Matheus Gonçalves do Espirito Santo
| 25k xp | 1 posts

Estou com o mesmo problema