Entrar Ainda não tem acesso?
2
respostas

[Dúvida] Não consigo ver a lista no console

Referente ao curso JavaScript para Web: Crie páginas dinâmicas, no capítulo Listas e atividade Lista de elementos

por Guilherme Napoles Silva
| 24.9k xp | 3 posts
Coordenador de Ensino

Boa noite, espero que esteja bem. Estou com problema que aparentemente é a conexão entre index e main, segue ambos os códigos. 

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

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

    <script src="main.js"></script>

</head>
<body>

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

</body>
</html>

JS


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

}

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

Também mando o print do console: Print Console

2 respostas
por Victor Costa Santos
| 2052.4k xp | 4021 posts
Alura Scuba Team Monitor do suporte educacional

Olá, Guilherme!

Você pode mover a tag <script src="main.js"></script> para o final do corpo do HTML, logo antes da tag </body>. Dessa forma, o JavaScript será carregado após o DOM estar completamente carregado.

Seu arquivo HTML ficaria assim:

<!DOCTYPE html>

/* ------------- CÓDIGO ACIMA ---------------------- */

    <audio src="sounds/keyc.wav" id="som_tecla_tom"></audio>

    <script src="main.js"></script>
</body>
</html>

Por fim tente imprimir utilizando o console, exemplo:

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

console.log(listaDeTeclas)

Resposta esperada no seu console:

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

Em caso de persistência, verifique se você chamou corretamente o arquivo, main.js, no seu arquivo index.html, e se de fato o arquivo JS, se chama "main.js", e se está na mesma pasta. Se ainda sim o erro persistir, peço que você compartilhe o link do seu projeto no GitHub ou uma pasta com todos os arquivos que você utilizou no através do Google Drive. Dessa forma, conseguirei realizar os testes necessários e te ajudar de forma mais assertiva.

Lembre-se que, se enviar os arquivos por meio do Google Drive, é necessário conceder permissão para que eu possa ter acesso.

Reforço que em casos de dúvidas, conte sempre com o fórum da comunidade Alura! Bons estudos!

Sucesso ✨

Um grande abraço e até mais!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!
por Marco Antonio Angelo
| 14.9k xp | 1 posts
Software Developer - .NET C#

Olá Guilherme, tudo bem?

Testei seus aquivos e de fato está correta toda a sua contrução de vinculo entre o index e o main, o único detalhe é o momento de chamada do main.js que está impactando no funcionamento.

Quando ele é adicionado dentro da tag head, todo seu código é executado no momento da inicialização antes mesmo dos elementos serem dispostos em tela.

Para contornar essa situação, você pode colocar a tag de script n body antes de finaliza-la. Exemplo: =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=

=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=

Em algum momento você também verá que existem maneiras avançadas de contornar isso colocando rotinas para executar somente após carregar o dom, não tendo a necessidade de colocar esse script no Body.

Espero que tenho ajudado você e bons estudos!!