2
respostas

Propriedade do objeto receber valor depois do if

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);*/
2 respostas

Oi Samuel, não entendi bem o que pretende fazer, qual é sua dúvida exatamente, Poderia explicar novamente por favor?

Olá Wanderson, obrigado pela resposta. Então minha dúvida é em relação a atribuir o valor dentro da propriedade comprar: eu criei uma variável tb tentei com textContent, mas sem sucesso.

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;
}

todos os outros valores recebo do form. a propriedade comprar quero receber depois do if

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";
    }
}

e montar a td informando sim ou não.

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;
}

Obrigado.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software