Oi, Carlos. Tudo bem?
Que legal que você conseguiu fazer o código funcionar com uma lógica bem mais enxuta! Você aplicou um conceito que a Jacqueline e o Rodrigo comentaram: a refatoração. Em vez de criar três funções quase iguais, você usou a estratégia de tornar o código dinâmico.
Vou te explicar o "pulo do gato" que fez o seu texto mudar lá na página, tá? O segredo está nestas duas linhas:
1. A mágica do Template String
let listaIngresso = document.querySelector(`#qtd-${tipoSelecionado}`);
Aqui, em vez de escrever document.getElementById('qtd-pista'), você usou o símbolo da crase (`) para criar um ID dinâmico.
- Se o usuário escolhe "pista", o JS entende que deve buscar o elemento
#qtd-pista. - Se escolhe "superior", ele busca
#qtd-superior.
Isso faz com que a variável listaIngresso guarde exatamente o elemento do HTML onde o número da quantidade está escrito.
2. A propriedade textContent
O textContent é o que representa o texto que aparece dentro de uma tag HTML (como um <span> ou uma <div>).
Quando você faz isso aqui:
let qtdIngresso = listaIngresso.textContent -= quantidade;
Acontecem duas coisas ao mesmo tempo:
- Cálculo: O JavaScript pega o texto que estava lá (ex: "100"), subtrai a
quantidade e guarda o resultado na variável qtdIngresso. - Atualização visual: Por causa do símbolo
-=, o JavaScript já "devolve" esse novo valor para o textContent do elemento na página. É por isso que o número diminui na tela na hora!
Um pequeno ponto de atenção
No seu código, a subtração acontece antes de você verificar se tem ingresso suficiente. Por isso você precisou daquela linha no if para "reverter" a conta caso o resultado fosse negativo.
Uma forma de deixar ainda mais seguro seria primeiro verificar se a conta daria negativo e, só se for maior ou igual a zero, aplicar a mudança no texto. Assim:
// Exemplo de como inverter a ordem para evitar o "reverter"
if (parseInt(listaIngresso.textContent) >= quantidade) {
listaIngresso.textContent -= quantidade;
alert('Compra realizada com sucesso!');
} else {
alert('Quantidade insuficiente!');
}
Seu raciocínio de usar seletores dinâmicos é excelente e evita muita repetição de código. Mandou muito bem!
Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!
