1
resposta

Desafio Outros tipos de ingressos - limpar campo se maior que disponivel

Olá, finalizei até a parte onde subtraímos cada quantidade de seu respectivo tipo de ingresso. Coloquei também para deixar novamente o espaço quantidade em branco para quando der quantidade maior que o permitido e deu certo.

No entanto me parece algo meio repetitivo fazer uma função para cada tipo de ingresso, aí ter que mudar nomes de variáveis uma a uma além de que fica de certa forma meio poluído e com funções muito parecidas umas com as outras. Isso até é comentado na aula. Sendo assim, como seria um outro método para eliminar essas repetições e até mesmo deixar mais flexível?

Segue código finalizado:

function comprar(){
let tipoIngresso = document.getElementById('tipo-ingresso');
let quantidadeIngresso = parseInt(document.getElementById('qtd').value);
if(tipoIngresso.value == 'pista'){
    comprarPista(quantidadeIngresso);
 }else if (tipoIngresso.value == 'superior'){
    comprarSuperior(quantidadeIngresso);
}else{
    comprarInferior(quantidadeIngresso);
}
}

function comprarPista(qtd){
    let qtdPista = parseInt(document.getElementById('qtd-pista').textContent)
    if(qtd > qtdPista){
        alert('erro, quantidade maior que o permitidos!');
        document.getElementById('qtd').value = ''
    }else{
       qtdPista = qtdPista - qtd
       document.getElementById('qtd-pista').textContent = qtdPista
   
    }
}
 
function comprarSuperior(qtd){
    let qtdSuperior = parseInt(document.getElementById('qtd-superior').textContent)
    if(qtd > qtdSuperior){
        alert('erro, quantidade maior que o permitido!');
        document.getElementById('qtd').value = '';
    }else{
       qtdSuperior = qtdSuperior - qtd
       document.getElementById('qtd-superior').textContent = qtdSuperior
   
    }
}

function comprarInferior(qtd){
    let qtdInferior = parseInt(document.getElementById('qtd-inferior').textContent)
    if(qtd > qtdInferior){
        alert('erro, quantidade maior que o permitido!');
        document.getElementById('qtd').value = '';
    }else{
       qtdInferior = qtdInferior - qtd
       document.getElementById('qtd-inferior').textContent = qtdInferior
   
    }
}

1 resposta

Olá João! Tudo bem?

Uma forma de tornar seu código mais limpo e flexível é utilizar uma única função para lidar com os diferentes tipos de ingressos. Podemos fazer isso passando o tipo de ingresso como um parâmetro para a função. Vou te mostrar um exemplo de como isso pode ser feito:

function comprar() {
    let tipoIngresso = document.getElementById('tipo-ingresso').value;
    let quantidadeIngresso = parseInt(document.getElementById('qtd').value);
    comprarIngresso(tipoIngresso, quantidadeIngresso);
}

function comprarIngresso(tipo, qtd) {
    let elementoQtd = document.getElementById(`qtd-${tipo}`);
    let qtdDisponivel = parseInt(elementoQtd.textContent);

    if (qtd > qtdDisponivel) {
        alert('erro, quantidade maior que o permitido!');
        document.getElementById('qtd').value = '';
    } else {
        qtdDisponivel -= qtd;
        elementoQtd.textContent = qtdDisponivel;
    }
}

Neste exemplo, a função comprarIngresso recebe o tipo de ingresso e a quantidade desejada. O elemento correspondente à quantidade disponível é obtido dinamicamente usando o tipo como parte do ID do elemento. Isso elimina a necessidade de funções separadas para cada tipo de ingresso.

Espero que essa abordagem te ajude a deixar seu código mais organizado e flexível.

Alura Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!