Tentei fazer selecionando todos os id's porém não funciona | JavaScript para Web: Crie páginas dinâmicas

3
respostas

Referente ao curso JavaScript para Web: Crie páginas dinâmicas, no capítulo Iterando em listas e atividade Textos dinâmicos

por Gabriel Rafaiel Bercelline

| 64k xp | 15 posts

Empresário

Olá, tentei fazer de uma maneira diferente para fixar melhor o conteúdo, e apesar de estar saindo a mesmo resultado no console.log não sai áudio algum. navegador com site da aula e console aberto mostrando todos os id's dos áudios

function tocaSom(idElementoAudio) {
  document.querySelector(idElementoAudio).play();
}

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

let contador = 0;

while (contador < listaDeTeclas.length ) {

  const tecla = listaDeTeclas[contador];

  const idAudio = `#${tecla.id}`;

  tecla.onclick = function () {
    tocaSom(idAudio)
  };
  console.log(idAudio);
  contador++;
}

3 respostas

por Júlio César

| 125.9k xp | 55 posts

21/09/2022

Em:

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

Está faltando o tipo de seletor que deseja usar para pegar os elementos, antes de audio. Caso queira todos os elementos que possuem tal classe use o .(ponto final), se quiser pegar um elemento com id, use o #(cerquilha). Algo que eu queria comentar, é que vc disse que não conseguiu pegars os "id's", no plural. O valor do atributo id de um elemento deve ser único, diferente das classes que podem ser reutilizadas em outros elementos. Então, se colocar em um elemento HTML id="elmt1", você não podeira repetir ele em outros elementos. Não dá nenhum erro e tal, mas é boa prática. Corrigindo a linha errada, ficaria assim:

const listaDeTeclas = document.querySelectorAll('#audio');

espero ter ajudado :)

por Gabriel Rafaiel Bercelline

| 64k xp | 15 posts

Empresário

21/09/2022

Opa blz obrigado pela atenção, então sobre os id's eu tentei fazer a seleção de cada id pelo elemento html audio. O que você mandou aqui infelizmente não funcionou pra mim. Vou mandar o código pra você tentar compilar aí.

HTML

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


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

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

CSS

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

body {
  align-items: center;
  background: linear-gradient(45deg, #a7cfdf 0%,#23538a 100%);
  display: flex;
  justify-content: center;
  flex-direction: column;
  font-family: 'Montserrat', sans-serif;
  min-height: 100vh;
}

h1 {
  color: var(--branca);
  margin-bottom: 20px;
  font-size: 2rem;
}

.teclado {
  background: linear-gradient(to bottom, #eeeeee 0%,#cccccc 100%);
  box-shadow: 6px 8px 0 6px #666, 10px 10px 10px #000;
  border-radius: 30px;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, 1fr);
  padding: 10px;
}

.tecla {
  background-color: var(--branca);
  border-radius: 30px;
  box-shadow: 3px 3px 0 var(--cinza);
  color: var(--vermelha);
  cursor: pointer;
  height: 120px;
  font-size: 1.75em;
  font-weight: bold;
  line-height: 120px;
  text-align: center;
  width: 120px;
}

.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;
}

.tecla.focus,
.tecla:focus {
  outline: none;
  box-shadow: 1px 1px 10px var(--luz);
}

.tecla.active:focus,
.tecla:active:focus {
  box-shadow: 3px 3px 0 var(--vermelha-escura) inset, 1px 1px 10px var(--luz);
}

por Júlio César

| 125.9k xp | 55 posts

21/09/2022

Oie, com o código HTML eu entendi o que aconteceu. Nesse caso, no elemento tem o atributo class, não sabia porque não tinha acesso ao HTML. Pra resolver isso, é só seguir o que eu te falei ali em cima, so que no lugar do #, coloca um .. Espero que dê certo :) Se não, avisa aqui que tentarei ajudar da forma que eu puder