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>