O meu projeto ficou dessa forma:
Fiz uma alteração no HTML nas tag <option value="tipo-inferior">Cadeira inferior</option>
- Acrescentei "tipo" na frente dos "value" e separei cada elemento do "local" - inferior, superior e pista na posição [1] com o método split() - tipoIngresso = tipo.split('-')[1]
;.
Dessa forma facilitou na hora de fazer o condicional "if", pois só precisei fazer uma única vez por meio da "template string" que compara os "value" recuperados, foi preciso chamar a função comprarPista(qtd) uma vez e pude utilizar a variável " tipoIngresso"(global) para recuperar as quantidades em - let qtdPorLocal = document.getElementById(
qtd-${tipoIngresso});
let tipoIngresso;
function comprar() {
let tipo = document.getElementById('tipo-ingresso').value;
tipoIngresso = tipo.split('-')[1];
let qtd = parseInt(document.getElementById('qtd').value);
if (tipo == `tipo-${tipoIngresso}`) {
comprarPista(qtd);
}
}
function comprarPista(qtd) {
let qtdPorLocal = document.getElementById(`qtd-${tipoIngresso}`);
//console.log(qtdPorLocal);
let qtdDisponivelIngresso = parseInt(qtdPorLocal.textContent);
if (qtd > qtdDisponivelIngresso) {
alert('Não temos a quantidade de ingresso selecionada!');
} else {
qtdDisponivelIngresso = qtdDisponivelIngresso - qtd;
qtdPorLocal.innerHTML = `<span id="qtd-${tipoIngresso}">${qtdDisponivelIngresso}</span>`;
alert('Obrigado pela compra!');
}
}
DICA: CTRL + D no visual permite múltiplas seleções e edições das mesmas ocorrências de "palavras" .