-1

Estou criando uma tabela, nela são inseridos dados de cada venda realizada. Além de mostrar os dados das vendas que foram realizadas, a intenção é pegar a quantidade total de cada produto e somar todos. Ex:

Foram feitas 3 vendas do produto x, cada venda foram vendidos 1.000 produtos. Total de produto x vendidos = a 3.000

O JavaScript está dividida em 2 partes. Uma com o formulário que pega os inputs e os coloca na tabela. A outra percorre a tabela e faz a soma dos produtos.

Porém não estou conseguindo juntar as duas coisas... Se eu for lá no HTML e preencher a tabela na mão, consigo ver a soma dos produtos, porém as vendas que são inseridas através do formulário não entram na soma.

PS: A soma ainda não inseri na tabela, estou apenas monitorando pelo console

//PRIMEIRO CÓDIGO JS - Pega os inputs

let btnAdd = document.querySelector('#adicionar-venda')
btnAdd.addEventListener("click", function(event) {
  event.preventDefault()


  //pega inputs do formulario
  var form = document.querySelector('#form-adiciona')
  let venda = obtemVendaFormulario(form)
  let vendaTr = montaTr(venda)

  let erros = validaVenda(venda)
  var msgErro = document.querySelector("#msg-erro")

  console.log(erros);
  if (erros.length > 0) {

    for (let i = 0; i < erros.lenght; i++) {
      msgErro.textContent += erros[i];
    }
    return;
  }

  var tabela = document.querySelector('#tabela-vendas')
  tabela.appendChild(vendaTr);
})

function getSocio() {
  let inputSelectSocio = document.getElementById('socio');
  let op = inputSelectSocio.options[inputSelectSocio.selectedIndex].value

  return op;
}

function getTipo() {
  let inputSelect = document.getElementById('tipo');
  let op = inputSelect.options[inputSelect.selectedIndex].value
  return op;
}

function obtemVendaFormulario(form) {
  let venda = {
    cliente: form.cliente.value,
    quantidade: form.quantidade.value,
    tipo: form.tipo.value,
    total: form.total.value,
    socio: form.socio.value,
    total6Furos: Number(calculaTotal6f(form.quantidade.value)),
    total8Furos: Number(calculaTotal8f(form.quantidade.value)),
    total9Furos: Number(calculaTotal9f(form.quantidade.value)),
    totalTavela: Number(calculaTavela(form.quantidade.value))
    //somar oq entra no form
  }
  console.log(venda);
  return venda;
}

// MONTA TABELA
function montaTr(venda) {
  let vendaTr = document.createElement("tr");
  vendaTr.classList.add("venda")

  let clienteTd = montaTd(venda.cliente, "info-cliente")
  let quantidadeTd = montaTd(venda.quantidade, "info-qtd")
  let tipoTd = montaTd(venda.tipo, "info-tipo");
  let totalTd = montaTd(venda.total, "info-total");
  let socioTd = montaTd(venda.socio, "info-socio");

  vendaTr.appendChild(clienteTd);
  vendaTr.appendChild(quantidadeTd);
  vendaTr.appendChild(tipoTd);
  vendaTr.appendChild(totalTd);
  vendaTr.appendChild(socioTd);

  return vendaTr;
}

function montaTd(dado, classe) {
  var td = document.createElement("td")
  td.classList.add(classe);
  td.textContent = dado;
  return td;
}

function validaVenda(venda) {
  var erros = [];
  if (!validaNome(venda.cliente)) {
    erros.push("nome é ivalido")
  }

  if (!validaQuantidade(venda.quantidade)) {
    erros.push("quantidade invalida")
  }

  if (!validaTipo(venda.tipo)) {
    erros.push("tipo invalido")
  } else {

  }

  if (!validaTot(venda.total)) {
    erros.push("total invalido")
  }

  if (!validaSocio(venda.socio)) {
    erros.push("socio invalido")
  }

  return erros
}


//SEGUNDO CÓDIGO JS - Percorre a tabela

var vendas = document.querySelectorAll('.venda');
let soma6 =0
let soma8 = 0
let soma9 = 0
let somaTavela = 0
let tipo 
let socio;
        
for (let i = 0; i<vendas.length; i++) {   
    let venda = vendas[i]  
    //tag de celula da tabela
    let tdNome = venda.querySelector(".info-cliente");
    let tdQt = venda.querySelector('.info-qtd');
    let tdTipo = venda.querySelector('.info-tipo')
    let tdSocio = venda.querySelector('.info-socio')
    let tdTotal = venda.querySelector('.info-total')
       
    //tag valor da celula
    let nome = tdNome.textContent
    let quantidade = Number(tdQt.textContent)
    let tipo = tdTipo.textContent
    let total = tdTotal.textContent
    let socio = tdSocio.textContent      
    
    let quantidadeEhValido = validaQuantidade(quantidade);
    let nomeEhValido = validaNome(nome);
    let tipoEhValido = validaTipo(tipo);
    let totalEhValido = validaTot(total);
    let socioEhValido = validaSocio(socio);

    if (quantidade <= 0 ) {
        quantidadeEhValido = false
        tdQt.textContent = "Insira um valor correto"
        venda.classList.add("campo-invalido")
    }

    if (nome == "") {
        nomeEhValido = false
        venda.classList.add("campo-invalido")
        tdNome.textContent = "Insira um nome"     
    }

    if (tipo == "") {
        tipoEhValido = false;
        venda.classList.add("campo-invalido")
        tdTipo.textContent = "Insira um tipo"
    }

    if (total == "") {
        totalEhValido = false;
        venda.classList.add("campo-invalido")
        tdTotal.innerHTML = "Insira o total"
    }

    if (socio == "") {
        socioEhValido = false;
        venda.classList.add("campo-invalido")
        tdSocio.textContent = "Insira um nome"
    }
    
    if (quantidadeEhValido && nomeEhValido && tipoEhValido && totalEhValido && socioEhValido) {
           
        let total6f = calculaTotal6f(quantidade)
        let total8f = calculaTotal8f(quantidade)
        let total9f = calculaTotal9f(quantidade)
        let totalT = calculaTavela(quantidade)
        
    }       
}

    // função que faz a soma dos produtos
    function calculaTotal6f(qt) {
        soma6 += qt                        
        return soma6
    }       
    function calculaTotal8f(qt) {
        soma8 += qt                    
        return soma8
    }
    
    function calculaTotal9f(qt) {
        soma9 += qt                        
        return soma9
    }
   
    function calculaTavela(qt) {
        somaTavela += qt
                  
        return somaTavela
    }


    

    // funções de validação
    function validaNome(nome) {
        if (nome != ""){
            return true;
        }else{
            return false;
        }
    }

    function validaQuantidade(quantidade) {
        if (quantidade >=0 && quantidade <= 30.000){
           
            return true
        }else {
            return false
        }
    }

    function validaTipo(tipo) {
        if (tipo == "6 Furos" || tipo == "8 furos" || tipo == "9 uros" || tipo == "Tavela") {
            return true
        }else {
            return false
        }
    }

    function validaTot(total) {
        if (total >= 0 && total <=30.000) {
            return true
        }else{
            return false
        }
    }

    function validaSocio(socio) {
        if (socio = "Sócio01" || "Sócio 02") {
            return true
        }else{
            return false
        }
    }
    
        
*{
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
}

body{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    background-color: grey;
}

header{
    height: 3em;
    background-color: #333;
    margin-bottom: 1em;
    color: white;
}

header .titulo{
    font-size: 2em;
    display: inline-block;
    vertical-align: middle;
    
    
}

header h2{

}

header .container:before{
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.main_container{
    
    width: 100vw;
    height: 100vh;
    position: relative;
}

.container{
    width: 60%;
    height: 100%;
    margin: 0 auto;
}

section{
    margin: 2em 0;
    overflow: hidden;
}

section h2{
    font-size: 2em;
    display: block;
    padding-bottom: 10px;
    border-bottom: 1px solid #fff;
    margin-bottom: 20px; 
}

table{
    
    box-shadow: 0 5px 30px darkgrey;
    width: 100%;
    table-layout: fixed;
    
}

table, th, td{
    border: 1px solid black;
    border-collapse: collapse ;
}

th, td{
    text-align: center;
    width: 21%;
   padding: 15px; 
}

tr, td{
    cursor: pointer;
}

th{
    font-weight: bold;
    text-align: center;
}

label{
    color: #555;
    display: block;
    margin-bottom: .2em;
}

.campo{
    margin: 0;
    padding-bottom: 1em;
    width: 100%;
    border: 1px solid #ccc;
    padding: .7em;
    width: 100%;
}

.campo-medio{
    display: inline-block;
    padding-right: .5em;
}

.grupo{
    width: 32%;
    display: inline-block;
    padding: 10px 0px;
}

button{
    padding: .5em 2em;
    border: 0;
    border-bottom: 3px solid;
    font-size: 1.2em;
    cursor: pointer;
    margin: 0;
    margin-top: -3px;
    color: #fff;
    background-color:#0c8cd3;
    border-color: #04324c;
    width: 20%;
    display: block;
    clear: both;
    margin: 10px 0px;

}

button:active{
    margin-top:0px;
    border: 0;
}

button[disabled=disabled], button:disabled {
    background-color: gray;
    border-color: darkgray;

}

.adicionar-venda{
    margin-top: 30px;
}

.campo-invalido{
    border: 1px solid red;
}

.paciente-invalido{
    background-color:lightcoral;
}

.campo-invalido{
    background-color: lightcoral;
}
<!DOCTYPE html>
<html lang="pt-BR">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/estilo.css">
  <title>Document</title>
</head>

<body>


  <div class="main-container">
    <header>
      <div class="container">
        <h1 class="titulo">Cerâmica Construir</h1>
      </div>
    </header>

    <main>
      <section class="container">
        <h2>lista vendas</h2>
        <table>
          <thead>
            <tr>
              <th>Cliente</th>
              <th>Quantidade</th>
              <th>Tipo</th>
              <th>Total R$</th>
              <th>Quem recebeu</th>
              <th>Total Produto</th>
            </tr>
          </thead>
          <tbody id="tabela-vendas">
            <tr class="venda" id="primeira-venda">
              <td class="info-cliente">jose</td>
              <td class="info-qtd">5.000</td>
              <td class="info-tipo">6 Furos</td>
              <td class="info-total">7.000</td>
              <td class="info-socio">socio01</td>

            </tr>
            <tr class="venda" id="segunda-venda">
              <td class="info-cliente">Nara</td>
              <td class="info-qtd">6.000</td>
              <td class="info-tipo">6 Furos</td>
              <td class="info-total">4.000</td>
              <td class="info-socio">socio02</td>

            </tr>
            <tr class="venda" id="terceira-venda">
              <td class="info-cliente">Felipe</td>
              <td class="info-qtd">20.000</td>
              <td class="info-tipo">6 Furos</td>
              <td class="info-total">12.000</td>
              <td class="info-socio">socio01</td>

            </tr>

          </tbody>
        </table>
        <span id="#total"></span>
      </section>
    </main>

    <!-- ... -->
    <section class="container">
      <h2 id="titulo-form">Adicionar nova venda</h2>
      <span id="msg-erro"></span>
      <form id="form-adiciona" name="form">


        <div class="grupo">
          <label for="cliente">Cliente:</label>
          <input id="cliente" name="cliente" type="text" placeholder="digite o nome do cliente" class="campo">
        </div>
        <div class="grupo">
          <label for="quantidade">Quantidade:</label>
          <input id="quantidade" name="quantidade" type="text" placeholder="digite a quantidade de tijolos" class="campo campo-medio">
        </div>
        <div class="grupo">
          <label for="tipo">Tipo:</label>
          <select id="tipo" name="tipo" type="text" placeholder="digite o tipo do priduto" class="campo campo-medio" onchange="getTipo()">
            <option value="">Selecione o tipo</option>
            <option name="6 Furos" value="6 Furos">6 Furos</option>
            <option name="9f" value="9f">Tijolos 9 furos</option>
            <option name="8f" value="8f">Tijolos 8 furos</option>
            <option name="tavela" value="tavela">Tavela</option>
          </select>
        </div>
        <div class="grupo">
          <label for="total">Total R$:</label>
          <input id="total" name="" type="text" placeholder="digite o total em R$" class="campo campo-medio">
        </div>
        <div class="grupo">
          <label for="socio">Quem recebeu:</label>
          <select id="socio" name="socio" type="text" placeholder="digite quem recebeu" class="campo campo-medio" onchange="getSocio()">
            <option value="entrada">sócio</option>
            <option value="socio01">Sócio 01</option>
            <option value="socio02">sócio 02</option>


          </select>
        </div>




        <button id="adicionar-venda" class="botao bto-principal">Adicionar nova venda</button>
      </form>
    </section>

  </div>
</body>


<script src="js/form.js"></script>
<script src="js/calculaTijolos.js"></script>


</html>

1 Resposta 1

-2

Se você usar o ponto como separador ele vai assumir que é um decimal. O código que calcula o total tem de estar dentro de uma função e ser chamado de cada vez que se adiciona uma linha.

//PRIMEIRO CÓDIGO JS - Pega os inputs

let btnAdd = document.querySelector('#adicionar-venda')
btnAdd.addEventListener("click", function(event) {
  event.preventDefault()


  //pega inputs do formulario
  var form = document.querySelector('#form-adiciona')
  let venda = obtemVendaFormulario(form)
  let vendaTr = montaTr(venda)

  let erros = validaVenda(venda)
  var msgErro = document.querySelector("#msg-erro")

  console.log(erros);
  if (erros.length > 0) {

    for (let i = 0; i < erros.lenght; i++) {
      msgErro.textContent += erros[i];
    }
    return;
  }

  var tabela = document.querySelector('#tabela-vendas')
  tabela.appendChild(vendaTr);
  calculaTotal();
})

function getSocio() {
  let inputSelectSocio = document.getElementById('socio');
  let op = inputSelectSocio.options[inputSelectSocio.selectedIndex].value

  return op;
}

function getTipo() {
  let inputSelect = document.getElementById('tipo');
  let op = inputSelect.options[inputSelect.selectedIndex].value
  return op;
}

function obtemVendaFormulario(form) {
  let venda = {
    cliente: form.cliente.value,
    quantidade: form.quantidade.value,
    tipo: form.tipo.value,
    total: form.total.value,
    socio: form.socio.value,
    total6Furos: Number(calculaTotal6f(form.quantidade.value)),
    total8Furos: Number(calculaTotal8f(form.quantidade.value)),
    total9Furos: Number(calculaTotal9f(form.quantidade.value)),
    totalTavela: Number(calculaTavela(form.quantidade.value))
    //somar oq entra no form
  }
  console.log(venda);
  return venda;
}

// MONTA TABELA
function montaTr(venda) {
  let vendaTr = document.createElement("tr");
  vendaTr.classList.add("venda")

  let clienteTd = montaTd(venda.cliente, "info-cliente")
  let quantidadeTd = montaTd(venda.quantidade, "info-qtd")
  let tipoTd = montaTd(venda.tipo, "info-tipo");
  let totalTd = montaTd(venda.total, "info-total");
  let socioTd = montaTd(venda.socio, "info-socio");

  vendaTr.appendChild(clienteTd);
  vendaTr.appendChild(quantidadeTd);
  vendaTr.appendChild(tipoTd);
  vendaTr.appendChild(totalTd);
  vendaTr.appendChild(socioTd);

  return vendaTr;
}

function montaTd(dado, classe) {
  var td = document.createElement("td")
  td.classList.add(classe);
  td.textContent = dado;
  return td;
}

function validaVenda(venda) {
  var erros = [];
  console.log(venda.quantidade);
  console.log(venda.total);
  if (!validaNome(venda.cliente)) {
    erros.push("nome é ivalido")
  }

  if (!validaQuantidade(venda.quantidade)) {
    erros.push("quantidade invalida")
  }

  if (!validaTipo(venda.tipo)) {
    erros.push("tipo invalido")
  } else {

  }

  if (!validaTot(venda.total)) {
    erros.push("total invalido")
  }

  if (!validaSocio(venda.socio)) {
    erros.push("socio invalido")
  }

  return erros
}


//SEGUNDO CÓDIGO JS - Percorre a tabela
var vendas = document.querySelectorAll('.venda');
let soma6 = 0;
let soma8 = 0;
let soma9 = 0;
let somaTavela = 0;
let tipo;
let socio;

function calculaTotal() {
    vendas = document.querySelectorAll('.venda');
    
            
    for (let i = 0; i<vendas.length; i++) {   
        let venda = vendas[i]  
        //tag de celula da tabela
        let tdNome = venda.querySelector(".info-cliente");
        let tdQt = venda.querySelector('.info-qtd');
        let tdTipo = venda.querySelector('.info-tipo')
        let tdSocio = venda.querySelector('.info-socio')
        let tdTotal = venda.querySelector('.info-total')
        
        //tag valor da celula
        let nome = tdNome.textContent
        let quantidade = Number(tdQt.textContent)
        let tipo = tdTipo.textContent
        let total = tdTotal.textContent
        let socio = tdSocio.textContent      
        
        let quantidadeEhValido = validaQuantidade(quantidade);
        let nomeEhValido = validaNome(nome);
        let tipoEhValido = validaTipo(tipo);
        let totalEhValido = validaTot(total);
        let socioEhValido = validaSocio(socio);

        if (quantidade <= 0 ) {
            quantidadeEhValido = false
            tdQt.textContent = "Insira um valor correto"
            venda.classList.add("campo-invalido")
        }

        if (nome == "") {
            nomeEhValido = false
            venda.classList.add("campo-invalido")
            tdNome.textContent = "Insira um nome"     
        }

        if (tipo == "") {
            tipoEhValido = false;
            venda.classList.add("campo-invalido")
            tdTipo.textContent = "Insira um tipo"
        }

        if (total == "") {
            totalEhValido = false;
            venda.classList.add("campo-invalido")
            tdTotal.innerHTML = "Insira o total"
        }

        if (socio == "") {
            socioEhValido = false;
            venda.classList.add("campo-invalido")
            tdSocio.textContent = "Insira um nome"
        }
        
        if (quantidadeEhValido && nomeEhValido && tipoEhValido && totalEhValido && socioEhValido) {
            
            let total6f = calculaTotal6f(quantidade)
            let total8f = calculaTotal8f(quantidade)
            let total9f = calculaTotal9f(quantidade)
            let totalT = Number(calculaTavela(quantidade))
            console.log(totalT);
        }       
    }
}

    // função que faz a soma dos produtos
    function calculaTotal6f(qt) {
        soma6 += qt                        
        return soma6
    }       
    function calculaTotal8f(qt) {
        soma8 += qt                    
        return soma8
    }
    
    function calculaTotal9f(qt) {
        soma9 += qt                        
        return soma9
    }
   
    function calculaTavela(qt) {
        somaTavela += Number(qt)
                  
        return somaTavela
    }


    

    // funções de validação
    function validaNome(nome) {
        if (nome != ""){
            return true;
        }else{
            return false;
        }
    }

    function validaQuantidade(quantidade) {
        if (quantidade >=0 && quantidade <= 30000){
           
            return true
        }else {
            return false
        }
    }

    function validaTipo(tipo) {
        if (tipo == "6 Furos" || tipo == "8 furos" || tipo == "9 uros" || tipo == "Tavela") {
            return true
        }else {
            return false
        }
    }

    function validaTot(total) {
        if (total >= 0 && total <=30000) {
            return true
        }else{
            return false
        }
    }

    function validaSocio(socio) {
        if (socio = "Sócio01" || "Sócio 02") {
            return true
        }else{
            return false
        }
    }

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .