Entrar Ainda não tem acesso?
4
respostas

Loop não está funcionando para soma

Referente ao curso JavaScript: programando na linguagem da web

por GABRIEL PIRES DE LIMA
| 96.5k xp | 48 posts

Isso aqui é um exercicio que estou fazendo, para fazer o calculo de vendas num dia em uma loja, a soma para de funcionar quando aplico o loop para todas as tabelas. Errei em algum ponto?

var vendasDia = document.querySelectorAll(".vendas-dia");

for ( var i = 0; i < vendasDia.length; i++) {

    var vendasDia = vendasDia[i];

    var tdDinheiro = vendasDia.querySelector(".info-dinheiro");
    var dinheiro = tdDinheiro.textContent;
    var dinheiro = parseInt(dinheiro);

    var tdCredito = vendasDia.querySelector(".info-credito");
    var credito = tdCredito.textContent;
    var credito = parseInt(credito);

    var tdDebito = vendasDia.querySelector(".info-debito");
    var debito = tdDebito.textContent;
    var debito = parseInt(debito);

    var tdVoucher = vendasDia.querySelector(".info-voucher");
    var voucher = tdVoucher.textContent;
    var voucher = parseInt(voucher);

    var tdTotal = vendasDia.querySelector(".total");
    var total = dinheiro + credito + debito + voucher;

    tdTotal.textContent = total;

}
4 respostas
por Jefferson Carlos dos Santos Araújo
| 87.1k xp | 34 posts

Olá Gabriel.

Seu código apresenta um possível conflito com os nomes das variáveis.

Repare que tanto dentro quanto fora do laço for você usou var e ambas com o mesmo nome. Isto significa que ambas as variáveis terão escopo global e como a declaração dentro do for possui o mesmo nome e mesmo escopo ela substitui a declaração fora do laço na primeira iteração!

Uma solução para isso é ao invés de usar var usar let pois este último possui escopo de bloco, substitua todas as variáveis do bloco for por let. Dessa forma elas não sobrescreverão o que está fora pois serão válida apenas dentro deste bloco.

Uma solução mais simples que isso tudo é simplesmente trocar os nomes das variáveis para não ficarem iguais, PORÉM recomendo fortemente que use o let para contexto de bloco.

var vendasDia = document.querySelectorAll(".vendas-dia");

for ( let i = 0; i < vendasDia.length; i++) {

    let vendasDia = vendasDia[i];

    let tdDinheiro = vendasDia.querySelector(".info-dinheiro");
    let dinheiro = tdDinheiro.textContent;
    let dinheiro = parseInt(dinheiro);

    let tdCredito = vendasDia.querySelector(".info-credito");
    let credito = tdCredito.textContent;
    let credito = parseInt(credito);

    let tdDebito = vendasDia.querySelector(".info-debito");
    let debito = tdDebito.textContent;
    let debito = parseInt(debito);

    let tdVoucher = vendasDia.querySelector(".info-voucher");
    let voucher = tdVoucher.textContent;
    let voucher = parseInt(voucher);

    let tdTotal = vendasDia.querySelector(".total");
    let total = dinheiro + credito + debito + voucher;

    tdTotal.textContent = total;

}

Espero ter ajudado.

por GABRIEL PIRES DE LIMA
| 96.5k xp | 48 posts

Eu testei aqui, continua com o mesmo erro.

por Jefferson Carlos dos Santos Araújo
| 87.1k xp | 34 posts

Poderia postar o HTML?

por GABRIEL PIRES DE LIMA
| 96.5k xp | 48 posts

Claro, aqui. 

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
        <title>Fluxo De Caixa Hortifruti R.E. - HOME</title>
        <link rel="stylesheet" href="css/reset.css">
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
        <section class="tabelas">
            <div>
                <h2>Total Fevereiro</h2>
            </div>
            <table>
                <legend>Vendas Fevereiro</legend>
                <thead>
                    <tr>
                        <th>Dia</th>
                        <th>Dinheiro</th>
                        <th>Crédito</th>
                        <th>Débito</th>
                        <th>Voucher</th>

                        <th>Total</th>
                    </tr>
                </thead>
                <tbody id="vendas-mês">
                    <tr class="venda-dia">
                        <td class="info-dia">1</td>
                        <td class="info-dinheiro">5</td>
                        <td class="info-credito">5</td>
                        <td class="info-debito">7</td>
                        <td class="info-voucher">5</td>

                        <td class="total">0</td>
                    </tr>
                    <tr class="venda-dia">
                        <td class="info-dia">2</td>
                        <td class="info-dinheiro">5</td>
                        <td class="info-credito">5</td>
                        <td class="info-debito">7</td>
                        <td class="info-voucher">5</td>

                        <td class="total">0</td>
                    </tr>
                    <tr class="venda-dia">
                        <td class="info-dia">3</td>
                        <td class="info-dinheiro">5</td>
                        <td class="info-credito">5</td>
                        <td class="info-debito">7</td>
                        <td class="info-voucher">5</td>

                        <td class="total">0</td>
                    </tr>
                    <tr class="venda-dia">
                        <td class="info-dia">4</td>
                        <td class="info-dinheiro">5</td>
                        <td class="info-credito">5</td>
                        <td class="info-debito">7</td>
                        <td class="info-voucher">5</td>

                        <td class="total">0</td>
                    </tr>
                    <tr class="venda-dia">
                        <td class="info-dia">5</td>
                        <td class="info-dinheiro">5</td>
                        <td class="info-credito">5</td>
                        <td class="info-debito">7</td>
                        <td class="info-voucher">5</td>
                        <td class="total">0</td>
                    </tr>
                    <tr class="venda-dia">
                        <td class="info-dia">6</td>
                        <td class="info-dinheiro">5</td>
                        <td class="info-credito">5</td>
                        <td class="info-debito">7</td>
                        <td class="info-voucher">5</td>
                        <td class="total">0</td>
                    </tr>
                    <tr class="venda-dia">
                        <td class="info-dia">7</td>
                        <td class="info-dinheiro">5</td>
                        <td class="info-credito">5</td>
                        <td class="info-debito">7</td>
                        <td class="info-voucher">5</td>
                        <td class="total">0</td>
                    </tr>
                    <tr class="venda-dia">
                        <td class="info-dia">8</td>
                        <td class="info-dinheiro">5</td>
                        <td class="info-credito">5</td>
                        <td class="info-debito">7</td>
                        <td class="info-voucher">5</td>
                        <td class="total">0</td>
                    </tr>
                    <tr class="venda-dia">
                        <td class="info-dia">9</td>
                        <td class="info-dinheiro">5</td>
                        <td class="info-credito">5</td>
                        <td class="info-debito">7</td>
                        <td class="info-voucher">5</td>
                        <td class="total">0</td>

                </tbody>
            </table>

        </section>
        <script src="js/calculo.js"></script>
    </body>
</html>