Entrar Ainda não tem acesso?
1
resposta

Duvida exercício 1

Referente ao curso JavaScript para Web: Crie páginas dinâmicas, no capítulo Conhecendo o JavaScript e atividade Lista de exercícios

por PAULO SOUSA ALVES FILHO
| 80.1k xp | 16 posts
  1. Selecionando elementos com JavaScript Você já sabe como usar o DevTools para inspecionar elementos HTML. Agora, está trabalhando em um projeto de site musical e precisa interagir com os botões que representam as teclas de um piano. Logo, seu desafio é: utilize o Javascript para selecionar um botão específico na sua página.

Utilizando o exemplo de HTML abaixo não consegui chamar o querySelector. Isso por que eu tenho que por obrigação atribuir uma class ou id? Ou teria uma outra forma?

<!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>Renovação Gráfica</title>
</head>
<body>
    <h1> Alura Fone </h1>
    <section class="teclado">
       <input type="button" value="1">
       <input type="button" value="2">
       <input type="button" value="3">
       <input type="button" value="4">
       <input type="button" value="5">
       <input type="button" value="6">
       <input type="button" value="7">
       <input type="button" value="8">
       <input type="button" value="9">
       <input type="button" value="*">
       <input type="button" value="0">
       <input type="button" value="#">
     </section>
     <input type="tel" placeholder="Digite seu telefone">
</body>
</html>
1 resposta
por Victor Costa Santos
| 1919k xp | 3680 posts
Alura Scuba Team Monitor de ForumOps

Olá, Paulo!

No seu HTML, você tem vários botões dentro de uma seção com a classe "teclado". Se você quiser selecionar um botão específico, pode usar diferentes métodos, mesmo que os botões não tenham IDs ou classes específicas.

1 - Usando querySelector, como cada botão tem um valor único, você pode usar esse valor para selecioná-lo. Por exemplo, para selecionar o botão com o valor "1", você pode fazer:

const botao1 = document.querySelector('input[value="1"]');

2 - querySelectorAll e índice, se você sabe a ordem dos botões, pode selecionar todos e depois acessar o específico pelo índice (lembrando que o índice começa em 0). Por exemplo, para selecionar o segundo botão (que tem o valor "2"):

const botoes = document.querySelectorAll('.teclado input');
const botao2 = botoes[1]; // Índice 1 corresponde ao segundo botão

3 - Usando getElementsByTagName. Este método retorna todos os elementos de um determinado tipo de tag. Como seus botões são inputs, você pode fazer:

const todosInputs = document.getElementsByTagName('input');
// Agora você pode usar um índice ou loop para encontrar o botão específico

Essas são algumas formas de selecionar elementos sem usar IDs ou classes diretamente, mas de toda em caso de dificuldades o gabarito da atividade, pode lhe auxiliar.

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!