Olá, Não consigo atribuir o valor a uma propriedade do objeto, após um if, sem ser recebido do html.
html
<!DOCTYPE html>
<html>
<head>
<title>Lista de Compras</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<section class="container">
<h1 class="centralizado">Lista de Compras</h1>
<table class="table table-striped table-bordered">
<thead>
<th>Nome</th>
<th>Quantidade</th>
<th>Mínimo</th>
<th>Atual</th>
<th>Comprar</th>
</thead>
<tbody id="tabela-produtos">
</tbody>
</table>
</section>
<section class="container">
<div class="row">
<div class="col-md-offset-3 col-md-3">
<form id="form-cadastra">
<div class="form-group">
<label for="">Nome</label>
<input type="text" name="nome" id="nome" class="form-control">
</div>
<div class="form-group">
<label>Quantidade</label>
<input type="text" name="quantidade" id="quantidade" class="form-control">
</div>
<div class="form-group">
<label>Estoque minimo</label>
<input type="text" name="estoqueMin" id="estoque-min" class="form-control">
</div>
<div class="form-group">
<label>Atual</label>
<input type="text" name="atual" id="atual" class="form-control">
</div>
<button id="botao-cadastrar" type="submit" class="btn btn-primary">Cadastrar</button>
</form>
</div>
</div>
</section>
<script type="text/javascript" src="js/principal.js"></script>
</body>
</html>
Js
var botaoCadastrar = document.querySelector("#botao-cadastrar");
botaoCadastrar.addEventListener("click", function(event){
event.preventDefault();
var form = document.querySelector("#form-cadastra");
var produto = obtemProduto(form);
var produtoTr = montaTr(produto);
console.log(produto);
var tabela = document.querySelector("#tabela-produtos");
tabela.appendChild(produtoTr).className='produto';
form.reset();
})
var produtos = document.querySelectorAll(".produto");
for(i=0; i < produtos.length; i++){
var produto = produtos[i];
var tdAtual = produto.querySelector("info-atual");
var tdEstoquemin = produto.querySelector("info-estoque-min");
if(tdAtual <= tdEstoquemin){
var compra = "sim"
}
if(tdAtual > tdEstoquemin){
var compra = "não";
}
}
function obtemProduto(form){
var produto = {
nome: form.nome.value,
quantidade: form.quantidade.value,
estoqueMin: form.estoqueMin.value,
atual: form.atual.value,
comprar: compra
}
return produto;
}
function montaTr(produto){
var produtoTr = document.createElement("tr");
produtoTr.classList.add("produto");
produtoTr.appendChild(montaTd(produto.nome, "info-nome"));
produtoTr.appendChild(montaTd(produto.quantidade, "info-quantidade"));
produtoTr.appendChild(montaTd(produto.estoqueMin, "info-estoque-min"));
produtoTr.appendChild(montaTd(produto.atual, "info-atual"));
produtoTr.appendChild(montaTd(produto.comprar, "info-comprar"));
return produtoTr;
}
function montaTd(dado, classe){
var td = document.createElement("td");
td.textContent = dado;
td.classList.add(classe);
return td;
}
/*var comprarTd = document.createElement("td");
comprarTd.textContent = comprar;
produtoTr.appendChild(comprarTd);
console.log(comprarTd);*/