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.
