[BUG] NaN no valor total | Lógica de programação: praticando com desafios

O BUG fica somente quando adiciono 4 itens como resolver ?

let totalGeral;
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 nosso subtotal 
    let preco = quantidade * valorUnitario;

    //adicionar no carrinho 
    let carrinho = document.getElementById('lista-produtos');
    carrinho.innerHTML =   carrinho.innerHTML + `<section class="carrinho__produtos__produto">
          <span class="texto-azul">${quantidade}</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;
    
    }
    
    function limpar() {
        totalGeral = 0;
        document.getElementById('lista-produtos').innerHTML = '';
        document.getElementById('valor-total').textContent = 'R$ 0';
    
    }

Oi Thiago, tudo bem? 😊

Analisando o seu código, identifiquei que o problema está na forma como você está extraindo e utilizando o valorUnitario. 🤔

A função split() retorna strings, e ao multiplicar uma string por um número, o resultado pode ser NaN (Not a Number) se a string não puder ser convertida em um número.

Para corrigir isso, você precisa converter o valorUnitario para um número antes de realizar o cálculo.

Segue o código corrigido:

let totalGeral = 0; // Inicialize totalGeral como 0
limpar();

function adicionar() {
    let produto = document.getElementById('produto').value;             
    let nomeProduto = produto.split('-')[0];
    let valorUnitario = produto.split('R$')[1];
    let quantidade = document.getElementById('quantidade').value;

    // Converter valorUnitario para um número
    valorUnitario = parseFloat(valorUnitario);

    let preco = quantidade * valorUnitario;

    let carrinho = document.getElementById('lista-produtos');
    carrinho.innerHTML += `<section class="carrinho__produtos__produto">
          <span class="texto-azul">${quantidade}</span> ${nomeProduto} <span class="texto-azul"> R$${preco.toFixed(2)}</span>
        </section>`;

    totalGeral += preco; // Use += para somar ao valor anterior
    let campoTotal = document.getElementById('valor-total');
    campoTotal.textContent = `R$ ${totalGeral.toFixed(2)}`; // Formate o valor total
    document.getElementById('quantidade').value = 0;    
}
    
function limpar() {
    totalGeral = 0;
    document.getElementById('lista-produtos').innerHTML = '';
    document.getElementById('valor-total').textContent = 'R$ 0';    
}

👉 Explicação das mudanças:

📌 Inicializei totalGeral com 0 para garantir que o valor inicial seja numérico.
📌 Usei parseFloat() para converter o valorUnitario em um número decimal.
📌 Usei += para adicionar o valor do produto ao totalGeral em vez de substituir o valor anterior.
📌 Usei toFixed(2) para formatar o preço e o valor total para duas casas decimais, garantindo que a exibição seja consistente com valores monetários.

Com essas alterações, o cálculo do valor total deve funcionar corretamente, mesmo ao adicionar vários itens ao carrinho. 💰

🎓 Para saber mais:

Caso este post o tenha ajudado,marque-o como solucionado ☑️.Bons Estudos! 🤓