2
respostas

[Bug] Desafio: carrinho de compras

Percebi um bug quando se mantêm a quantidade em ZERO e clica no botão ADICIONAR. Os produtos são inseridos pois não há uma validação com IF no código original.

Insira aqui a descrição dessa imagem para ajudar na acessibilidadeUma sugestão de solução é:

function adicionar() {
    if (document.getElementById('quantidade').value != 0) {  //este IF foi incluído ao código original
    //recuperar nome do produto, quantidade e valor
    let produto = document.getElementById('produto').value;
    let nomeProduto = produto.split('-')[0];
    let valorUnitario = produto.split('R$')[1];
    let quantidade = document.getElementById('quantidade').value;
    
    //calcular o preço
    let preco = valorUnitario * quantidade;
    
    //adicionar no carrinho
    let carrinho = document.getElementById('lista-produtos');
    carrinho.innerHTML = carrinho.innerHTML + `<section class="carrinho__produtos__produto">
    <span class="texto-azul">${quantidade}x</span> ${nomeProduto} <span class="texto-azul">R$${valorUnitario}</span>
  </section>`;
    
    //calcular o valor total
    totalGeral = totalGeral + preco;
    let campoTotal = document.getElementById('valor-total');
    campoTotal.textContent = `R$${totalGeral}`;
    document.getElementById('quantidade').value = 0;
   }
}
2 respostas

Precisa adicionar verificações para garantir que a quantidade seja um número válido maior que zero:

function adicionar() {
    // Recuperar nome do produto, quantidade e valor
    let produto = document.getElementById('produto').value;
    let quantidadeInput = document.getElementById('quantidade');
    
    // Verificar se a quantidade é um número maior que zero
    if (quantidadeInput.value > 0 && !isNaN(quantidadeInput.value)) {
        let nomeProduto = produto.split('-')[0];
        let valorUnitario = parseFloat(produto.split('R$')[1].replace(',', '.')); // Converte para número
        
        // Calcular o preço
        let quantidade = parseFloat(quantidadeInput.value);
        let preco = valorUnitario * quantidade;
        
        // Adicionar no carrinho
        let carrinho = document.getElementById('lista-produtos');
        carrinho.innerHTML += `<section class="carrinho__produtos__produto">
            <span class="texto-azul">${quantidade}x</span> ${nomeProduto} <span class="texto-azul">R$${valorUnitario.toFixed(2)}</span>
        </section>`;
        
        // Calcular o valor total
        totalGeral += preco;
        let campoTotal = document.getElementById('valor-total');
        campoTotal.textContent = `R$${totalGeral.toFixed(2)}`;
        
        // Resetar a quantidade para zero
        quantidadeInput.value = 0;
    } else {
        // Mensagem de erro se a quantidade não for válida
        alert('A quantidade deve ser um número maior que zero.');
    }
}

Tentei resolver utilizando condições:

let totalGeral = 0;

function adicionar() {
    let produto = document.getElementById(`produto`).value;
    let quantidadeProduto = document.getElementById(`quantidade`).value;
    let nomeProduto = produto.split(`-`)[0];
    let valorProduto = produto.split(`R$`)[1]; 
    let preço = valorProduto * quantidadeProduto;
    let carrinho = document.getElementById(`lista-produtos`);
    if(quantidadeProduto == 0) {
        alert(`Por favor, insira a quantidade desejada de itens.`)
    } else {
        carrinho.innerHTML = carrinho.innerHTML + `<section class="carrinho__produtos__produto">
        <span class="texto-azul">${quantidadeProduto}x</span> ${nomeProduto} <span class="texto-azul">R$${preço}</span>
      </section>`
        totalGeral = totalGeral + preço;
        let mostrarPreço = document.getElementById(`valor-total`);
        mostrarPreço.textContent = `R$${totalGeral}`;
        quantidadeProduto = document.getElementById(`quantidade`).value = 0;
        }
}

function limpar() {
    totalGeral = 0
    document.getElementById(`lista-produtos`).innerHTML = ``;
    document.getElementById(`valor-total`).textContent = `R$0,00`;
}

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software