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

[Dúvida] Questão 1 - Como fazer o efeito para dois botões?

Olá! Consegui fazer o que a questão pediu, mas se eu tiver mais de um botão, por exemplo, como faria para os dois botões incrementarem um valor pro contador? Tentei fazer uma lista para armazenar os dois, mas não consegui. Se puderem só tirar essa dúvida, eu agradeço.

4 respostas
solução!

Olá. Se eu entendi bem a pergunta, há alguns jeitos simples de fazer isso.

Você pode colocar os botões de mesma classe em uma lista, utilizando o "querySelectorAll" e depois, usar um forEach nessa lista, fazendo com que cada elemento chame a função do contador quando pressionado.

let contador = 0;

const botoes = document.querySelectorAll(".tecla_pom")

function incrementarContador() {
  contador = contador + 1;
  console.log("Contador: " + contador);
}

botoes.forEach(element => {
    element.addEventListener('click', incrementarContador)
})

Outra forma seria fazer via HTML, usando o "onclick"

<button class="tecla tecla_pom" onclick="incrementarContador()">Pom</button>
<button class="tecla tecla_pom" onclick="incrementarContador()">Pom2</button>
<button class="tecla tecla_pom" onclick="incrementarContador()">Pom3</button>

Era isso mesmo, obrigada! A única parte do código que ainda não compreendo quando deve ser usado são esses eventos do tipo 'addEventListener', não foi explicado até agora no curso. Vou conseguir aprender sobre nesse curso ou algum outro? Se não, onde posso estudar e me profundar sobre? Já agradeço pela ajuda!

Disponha!

Sobre o addEventListener, acredito que será explicado em algum outro curso um pouco mais avançado. Mas é bem simples:

o addEventListener faz com que o elemento fique "ouvindo" o que acontece. Por exemplo, temos um botão que precisa ativar a função "concluído" quando clicado. Podemos fazer assim:

function concluido(){
  console.log("Concluído")
}

let botao = document.getElementById('botao')

botao.addEventListener('click', concluido)

O addEventListener espera dois parâmetros: Qual evento eu quero observar e o que eu quero que aconteça quando ele ocorrer. No exemplo, eventListener está observando quando haverá um 'click' (Existem outros eventos, como 'keypress', 'mouseover', etc.

Por fim, ele espera uma função para chamar quando esse evento ocorrer. Que no nosso caso, é a função "concluido".

Você pode ver mais à respeito nesse link: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

Espero ter ajudado!

Entendi. Ajudou bastante! Obrigada, Lucas!