Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Dúvida em relação as teclas no html

Referente ao curso JavaScript para Web: Crie páginas dinâmicas, no capítulo Funções e atividade Projeto da aula anterior

por João Pedro De Souza Vieira
| 86.7k xp | 4 posts

Boa noite pessoal, percebi talvez um "erro" nos códigos das teclas lá no html, segue o código a seguir:

  <button class="tecla tecla_pom">Pom</button>
  <button class="tecla tecla_clap">Clap</button>
  <button class="tecla tecla_tim">Tim</button>

Esse mesmo erro ocorre em todas as linhas de código para as teclas mas decidi colocar somente essas 3 linhas. reparei que na nomeação da classe de cada um deles esta escrito duas vezes a palavra "tecla" com um espaço entre elas, mas no Js elas estão sendo acessadas com uma escrita diferente:

document.querySelector('.tecla_pom')
document.querySelector('#som_tecla_pom').play()

Gostaria de saber se isso foi um erro mesmo, ou se a escrita esta correta, e se possível, o por quê de ter essa diferença na escrita.

4 respostas
por DANILLO PINHEIRO DA VEIGA
| 109.8k xp | 4 posts

Então João, é por causa que quando você usa o querySelector, ele irá procurar no html o primeiro elemento que possue o valor especificado nas aspas(tag, classe ou id), então para diferenciar se o que você procura é uma classe, id, etc, voce precisa especificar como se fosse no css.

Por exemplo:

// classe no css
.nome {

}

// classe no querySelector
// Irá retornar o primeiro elemento que possuir a classe nome
document.querySelector('.nome');

Mas na hora de usar no html voce nao precisa definir o ponto, e o espaço é usado para separar as classes, por exemplo, uma tag pode ter mais de uma classe

// Essa tag possui uma cor vermelha
<div class="vermelho"></div>

// Essa tag possui uma cor vermelha e um fundo transparente
<div class="vermelho fundo-transparente"></div>

Se ainda possui duvida é so perguntar. :)

por João Pedro De Souza Vieira
| 86.7k xp | 4 posts

acredito que entendi! kkkkkk, então quando ela escreveu:

class="tecla tecla_pom"

ela criou duas classes, a classe tecla e a tecla_pom ?

solução!
por DANILLO PINHEIRO DA VEIGA
| 109.8k xp | 4 posts

EXATAMENTE!!!

por João Pedro De Souza Vieira
| 86.7k xp | 4 posts

show!, obrigado pela explicação mano, esclareceu demais!