[Dúvida] Adicionar produto no carrinho | Lógica de programação: praticando com desafios

Criei o código como entendi acompanhando as aulas, e refiz o código passado nas aulas. Porém ambos não funcionam. Às vezes o carrinho não limpa antes de adicionar o produto, e às vezes limpa e não adiciona o produto selecionado:

Código feito nas aulas (mudei coisas pequenas e adicionei alguns testes de console, que retiro dos comentários quando necessário):

let totalGeral = 0;
limpar();

function adicionar () {
//Recuperar valores, 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, o subtotal
    let preco = quantidade * valorUnitario;
    let carrinho = document.getElementById('lista-produtos');
    //Adicionar no carrinho
    carrinho.innerHTML = carrinho.innerHTML + `<section class="carrinho__produtos__produto">
    <span class="texto-azul">${quantidade}x</span> ${nomeProduto} <span class="texto-azul">R$${preco}</span>
  </section>`;  
// Atualizar o valor total
    totalGeral = totalGeral + preco;
    let campoTotal = document.getElementById('valor-total');
    campoTotal.textContent = `R$ ${totalGeral}`;
    document.getElementById('quantidade').value = 0;

//     console.log(nomeProduto);
//     console.log(valorUnitario);
//     console.log(quantidade);
//     console.log(preco);
//     console.log(carrinho);
}

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

Código que criei (fiz como entendi, adicionei alguns comentários para me ajudar depois, e a parte de limpar código não tenho certeza se está correta, por causa do problema acima):

let total = 0;
document.getElementById('lista-produtos').innerHTML = ' ';

function adicionar() {
    let produto = document.getElementById('produto').value; //".value" pode ser colocado no final do "document.getElementById('produto');"
    let produtoNome = produto.split('-')[0];
    let valorUnitario = produto.split('R$')[1];
    let quantidade = document.getElementById('quantidade').value;
    let subtotal = valorUnitario * quantidade;
    let listaCarrinho = document.getElementById('lista-produtos');
    listaCarrinho.innerHTML = listaCarrinho.innerHTML + `<section class="carrinho__produtos__produto">
    <span class="texto-azul">(${quantidade})</span> ${produtoNome} <span class="texto-azul">- R$ ${subtotal},00</span>
</section>`; //Pesquisando como mudar para casa decimal sem ",00"
    total = total + subtotal
    let campoTotal = document.getElementById('valor-total');
    campoTotal.innerHTML = `R$ ${total},00`; //Pesquisando como mudar para casa decimal sem ",00"
    document.getElementById('quantidade').value = '';

    console.log(produtoNome);
    console.log(valorUnitario);
    console.log(quantidade);
    console.log(subtotal);
    
    console.log(listaCarrinho);
    console.log('-----------------------------------------'); 
}

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

Olá, Noele. Tudo bem?

Pelo que pude analisar em seu código, parece que você está enfrentando um problema com a sincronização das funções de adicionar e limpar itens do carrinho. Vou tentar te ajudar com isso.

Primeiramente, é importante entender que a função limpar() deve ser chamada em um momento específico, como por exemplo, quando o usuário clica em um botão "Limpar Carrinho". Se a função limpar() estiver sendo chamada em momentos inadequados, isso pode causar o comportamento que você descreveu.

Em relação ao seu código, notei um pequeno erro na função limpar() do segundo código. Você está tentando atribuir um valor a document.getElementById('valor-total'), mas o correto seria atribuir ao innerHTML ou textContent deste elemento, assim como você fez no primeiro código. Então, a linha correta seria: document.getElementById('valor-total').textContent = 'R$ 0,00';

Agora, vamos a um exemplo prático de como você poderia organizar as chamadas para as funções adicionar() e limpar():

// Evento de clique no botão "Adicionar ao Carrinho"
document.getElementById('btn-adicionar').addEventListener('click', function() {
    adicionar();
});

// Evento de clique no botão "Limpar Carrinho"
document.getElementById('btn-limpar').addEventListener('click', function() {
    limpar();
});

Neste exemplo, a função adicionar() é chamada quando o usuário clica no botão "Adicionar ao Carrinho" e a função limpar() é chamada quando o usuário clica no botão "Limpar Carrinho". Assim, você tem controle sobre quando cada função é executada.

Espero ter ajudado e bons estudos!

Mergulhe em programação