XP 0

O contador do carrinho

Estado + evento + tela

Hora de construir o carrinho. Ele tem um estado (a quantidade, um let), um número na tela e um botão que soma e atualiza:

let qtd = 0;
const contador = document.getElementById("qtd");

botao.addEventListener("click", function () {
  qtd = qtd + 1;
  contador.textContent = qtd;
});

Duas coisas a cada clique: (1) mudar o dado (qtd = qtd + 1) e (2) refletir na tela (textContent).

⚠️ Erro clássico: mudar só a variável e esquecer de atualizar o textContent — a lógica funciona, mas a tela "congela". Dado e tela são coisas separadas; você atualiza os dois.

Pontos-chave

  • muda o dado + atualiza a tela
    qtd = qtd + 1; contador.textContent = qtd.