interação dos botões | JavaScript

Oi Rayane! Tudo bem?

Você quer adicionar algumas funções de teclado neles: usar as setas para cima e para baixo para mudar entre os botões e a tecla Enter para mostrar a mensagem do botão escolhido.

Pra começar, você precisa pegar os botões usando JavaScript. Se seus botões tiverem os nomes "botao1" e "botao2", faça assim:

let botao1 = document.getElementById("botao1");
let botao2 = document.getElementById("botao2");

Depois, vamos criar uma variável para saber qual botão está sendo usado. Vamos começar com o botao1:

let botaoSelecionado = botao1;

Agora, adicione uma função para ouvir quando alguém pressionar alguma tecla:

window.addEventListener("keydown", function(event) {
  // Aqui você coloca suas instruções
});

Dentro dessa função, você verifica qual tecla foi pressionada e decide o que fazer:

window.addEventListener("keydown", function(event) {
  switch (event.key) {
    case "ArrowUp":
      botaoSelecionado = botao1;
      break;
    case "ArrowDown":
      botaoSelecionado = botao2;
      break;
    case "Enter":
      alert("Você escolheu: " + botaoSelecionado.innerText);
      break;
  }
});

Assim, se você pressionar a seta para cima, o botao1 será escolhido. Se pressionar a seta para baixo, o botao2 será escolhido. E se pressionar Enter, aparecerá uma mensagem com o nome do botão que você selecionou.

Talvez você precise ajustar isso conforme seu projeto, mas espero que te ajude a começar!

Aqui o código completo para você testar:

<html lang="pt-br">

<head>
  <meta charset="UTF-8">
  <title>Teste de Botões</title>
</head>

<body>

  <h1>Teste de Botões</h1>

  <!-- Botões para testar -->
  <button id="botao1">Botão 1</button>
  <button id="botao2">Botão 2</button>

  <script>
    // Seu código JavaScript aqui
    let botao1 = document.getElementById("botao1");
    let botao2 = document.getElementById("botao2");
    let botaoSelecionado = botao1;
    window.addEventListener("keydown", function(event) {
      switch (event.key) {
        case "ArrowUp":
          botaoSelecionado = botao1;
          break;
        case "ArrowDown":
          botaoSelecionado = botao2;
          break;
        case "Enter":
          alert("Você escolheu: " + botaoSelecionado.innerText);
          break;
      }
    });
  </script>

</body>

</html>

Caso você queira ver na prática aqui está o código no CodePen.

Um abraço e bons estudos.