[Dúvida] Validação

Olá, Pedro! Tudo bem?

Analisando o código que você compartilhou, a função validaCompra() está correta e deve funcionar como esperado. O problema parece estar na forma como você está obtendo o nomeProduto e o valorUnitario na função adicionar().

Você está usando o método split() para extrair o nomeProduto e o valorUnitario da string produto, mas como você está fazendo isso pode estar causando problemas.

A linha var nomeProduto = produto.split('-')[0]; assume que o produto é uma string que contém um '-' e que o nome do produto é tudo o que vem antes desse '-'. Se o produto não contiver um '-', nomeProduto será a string completa, o que pode não ser o que você espera.

Da mesma forma, a linha var valorUnitario = parseFloat(produto.split('R$')[1]); assume que o produto é uma string que contém 'R$' e que o valor unitário é tudo o que vem depois disso. Se o produto não contiver 'R$', valorUnitario será NaN (Not a Number), o que certamente causará problemas mais adiante.

Sugiro que você verifique como o valor do produto está sendo definido e se ele realmente contém esses delimitadores '-' e 'R$'. Talvez seja necessário ajustar a forma como você está obtendo o nomeProduto e o valorUnitario.

Espero ter ajudado e bons estudos!

Então, esses passos que você falou estavam funcionando, tanto que selecionava os produtos corretamente, fazia o cálculo correto de valores e afins, só a function validaCompra que não funciona, tanto que se removo ela, roda liso. Esse é meu HTML:

 <main class="conteudo-principal">
    <div class="grafismo-azul"></div>
    <section class="adicionar-produto">
      <h1 class="titulo">
        Carrinho de <span class="texto-azul">compras</span>
      </h1>

      <form class="formulario">
        <label class="campo-grupo">
          <span class="texto-medio-azul">Produto</span>
          <select class="produto-input" name="produto" id="produto">
            <option value="Fone de ouvido - R$100">Fone de ouvido - R$100</option>
            <option value="Celular - R$1400">Celular - R$1400</option>
            <option value="Oculus VR - R$5000">Oculus VR - R$5000</option>
          </select>
          </div>
        </label>

        <section class="parte-inferior">
          <label class="campo-grupo">
            <span class="texto-medio-azul">Qtde.</span>
            <input class="quantidade-input" id="quantidade" type="number" placeholder="100">
          </label>

          <section class="botoes-wrapper">
            <button onclick="adicionar()" type="button" class="botao-form botao-adicionar">Adicionar</button>
            <button onclick="limpar()" type="button" class="botao-form botao-limpar">Limpar</button>
          </section>
        </section>
      </form>
    </section>
    <section class="carrinho">
      <img src="./assets/carrinho-cinza.svg" alt="Imagem de um carrinho de compras cinza">

      <div class="titulo-wrapper">
        <img src="./assets/icone-carrinho.svg" alt="ícone de carrinho">

        <h2 class="carrinho__titulo">Produtos no carrinho</h2>
      </div>

      <section class="carrinho__produtos" id="lista-produtos">
        <section class="carrinho__produtos__produto">
          <span class="texto-azul">1x</span> Celular <span class="texto-azul">R$1400</span>
        </section>
      </section>

      <div class="divisoria"></div>

      <p class="carrinho__total">
        Total: <span class="texto-azul" id="valor-total">R$1400</span>
      </p>
    </section>
  </main>

Bom dia, Pedro! Como vai?

Fiz algumas modificações no seu código visando resolver o seu problema com a função validaCompra. Depois de ajustar ela apareceram alguns outros erros e problemas, mas imagino que essa versão do código que vou compartilhar com você resolver todos os problemas:

function adicionar() {
  var produto = document.getElementById('produto').value;
  var mostraValor = document.getElementById('valor-total');
  var nomeProduto = produto.split('-')[0].trim();
  var valorUnitario = parseFloat(produto.split('R$')[1]);
  var valorTotal = 0;
  var qtd = parseInt(document.getElementById('quantidade').value);

  if (validaCompra(nomeProduto, qtd)) {
    valorTotal = valorTotal + calcularValorDaCompra(qtd, valorUnitario);

    var carrinho = document.getElementById('lista-produtos');

    carrinho.innerHTML = carrinho.innerHTML + `<section class="carrinho__produtos__produto">
          <span class="texto-azul">${qtd}x</span> ${nomeProduto} <span class="texto-azul">R$${calcularValorDaCompra(qtd, valorUnitario)}</span>
          </section>`;
    console.log("O tipo é: " + typeof(valorTotal))
    mostraValor.textContent = `R$${parseFloat(valorTotal)}`;

    document.getElementById('quantidade').value = 0;
  } else {
    alert('Produto ou Quantidade Inválido !')
  }


}

function calcularValorDaCompra(qtd, valorUnitario) {
  console.log(typeof(valorUnitario))
  var valorDaCompra = qtd * valorUnitario;

  console.log(typeof(valorDaCompra))
  return valorDaCompra;
}

function limpar() {
  var qtd = document.getElementById('quantidade');
  var mostraValor = document.getElementById('valor-total');
  var mostraProdutos = document.getElementById('lista-produtos')

  qtd.textContent = '0';
  mostraValor.textContent = 'R$0';
  valorTotal = 0;
  mostraProdutos.innerHTML = ''
}

function validaCompra(nomeProduto, qtd) {
  console.log("Nome do Produto:", nomeProduto);
  console.log("Quantidade:", qtd);

  var confirmaQtd = qtd > 0;
  console.log("ConfirmaQtd:", confirmaQtd);

  var compraConfirmada = confirmaQtd && (nomeProduto === 'Fone de ouvido' || nomeProduto === 'Celular' || nomeProduto === 'Oculus VR');
  console.log("Compra Confirmada:", compraConfirmada);

  return compraConfirmada;
}

A título de informação, o código HTML que você compartilhou não tinha a importação do código JavaScript, isso poderia ser um dos problemas que você tinha anteriormente, verifique esse ponto no seu projeto.

No mais, espero ter ajudado e caso tenha mais problemas, estarei à disposição.

Bons estudos!

Só mais uma dúvida, poderia me explicar o que eu fiz de errado e quais foram suas correções?

Opa, Pedro! Claro que posso.

Segue a detalhação sobre o problema que estava presente no seu código e a correção que apliquei:

1. Escopo da variável valorTotal:

• Problema: no código original, a variável valorTotal é declarada dentro da função adicionar(). Isso significa que ela só existe dentro da função e não pode ser acessada por outras funções.

• Código corrigido: no código corrigido, a variável valorTotal é declarada fora das funções. Isso a torna global, o que significa que pode ser acessada por qualquer função no código. Isso é importante porque permite que o valor total seja atualizado e usado por outras funções, como a função limpar().

2. Parse de valores:

• Problema: no código original, o valor da quantidade (qtd) é utilizado sem ser convertido para um número inteiro. Isso pode gerar erros se o valor digitado pelo usuário não for um número válido.

• Código corrigido: no código corrigido, a função parseInt() é usada para converter qtd para um número inteiro antes de usá-la. Isso garante que o valor seja sempre um número válido e evita erros.

3. Manipulação de strings:

• Problema: no código original, o nome do produto (nomeProduto) é extraído da string sem remover espaços em branco. Isso pode gerar resultados inconsistentes se o nome do produto tiver espaços em branco no início ou no final.

• Código corrigido: no código corrigido, a função trim() é usada para remover espaços em branco do nome do produto antes de extraí-lo. Isso garante que o nome do produto seja sempre extraído da mesma forma, independentemente de ter ou não espaços em branco.

4. Concatenação de strings:

• Problema: o código original, a concatenação de strings para o valor total na função adicionar() não utiliza o método parseFloat. Isso pode gerar erros se o valor total não for um número válido.

• Código corrigido: no código corrigido, o método parseFloat() é usado para converter o valor total para um número de ponto flutuante antes de concatená-lo com a string. Isso garante que o valor total seja sempre exibido corretamente.

Espero ter esclarecido!