2

Eu preciso exibir o resultado total somando os valores que contem a coluna valor:

            var linha=document.getElementsByClassName("calcular");
            var resultado=document.getElementById('total').innerHTML = 0;

            for (var i=0; i < linha.length; i++) {
                resultado += parseInt(linha[i].innerHTML);
            }

            document.getElementById("total").innerHTML = resultado;
        table {
            margin: 5px;
            float: left;
            width: 564px;
            padding: 6px;
            font-weight: bold;
            font-size: 10pt;
            color: white;
            text-align: center;
        }

        th {
            background-color: slateblue;
            color: white;
        }

        tr td {
            background-color: white;
            color: black;
            text-align: center;
        }
            <table>
                <tr>
                    <th>ID</th>
                    <th>NOME</th>
                    <th>VALOR</th>
                </tr>
                <tr>
                    <td>01</td>
                    <td>Beltrano</td>
                    <td class="calcular">10.50</td>
                </tr>
                <tr>
                    <td>02</td>
                    <td>Fulano</td>
                    <td class="calcular">05.98</td>
                </tr>
                <tr>
                    <td>03</td>
                    <td>Ciclano</td>
                    <td class="calcular">25.00</td>
                </tr>
                <tr>
                    <td> &nbsp; </td>
                    <td> &nbsp; </td>
                    <td> &nbsp; </td>
                </tr>
                <tr>
                    <td> TOTAL </td>
                    <td> &nbsp; </td>
                    <td id="total"> &nbsp; </td>
                </tr>
            </table>

O script funciona em parte, mas não consegui fazer com que me dê o resultado total com as casas decimais(depois do ponto).

  • Como resposta, me retorna: 40

  • Quando deveria me retorna: 41.48

Pelo menos é assim que imagino que deve ser.

Se puxar isso em uma matriz array, pra interagir entre os índices dá pra resolver ou tô enganado?

Ou isso resolve com apenas mais alguma expressão aritmética

3
  • 1
    não é só trocar o parseInt por parseFloat? Commented 2/06/2018 às 19:42
  • 1
    melhor que usar o parseInt/Float é usar +: resultado += +linha[i].innerHtml; Commented 2/06/2018 às 19:56
  • @MarceloUchimura Seu comentário se fez juz ao problema que mais me valeu como DICA! Agradeço desde, ja. Commented 2/06/2018 às 21:26

1 Resposta 1

3

A função parseInt() retorna qualquer valor inteiro que possa extrair da string que lhe é passada.

parseInt(10.50) // 10

portanto no loop for está somando a parte inteira das strings retornadas

No loop for utilize a função Number ou parseFloat e no resultado final toFixed(2)

 var linha=document.getElementsByClassName("calcular");
 var resultado=document.getElementById('total').innerHTML = 0;

     for (var i=0; i < linha.length; i++) {
         resultado += Number(linha[i].innerHTML);
     }

 document.getElementById("total").innerHTML = resultado.toFixed(2);
        table {
            margin: 5px;
            float: left;
            width: 564px;
            padding: 6px;
            font-weight: bold;
            font-size: 10pt;
            color: white;
            text-align: center;
        }

        th {
            background-color: slateblue;
            color: white;
        }

        tr td {
            background-color: white;
            color: black;
            text-align: center;
        }
<table>
                <tr>
                    <th>ID</th>
                    <th>NOME</th>
                    <th>VALOR</th>
                </tr>
                <tr>
                    <td>01</td>
                    <td>Beltrano</td>
                    <td class="calcular">10.50</td>
                </tr>
                <tr>
                    <td>02</td>
                    <td>Fulano</td>
                    <td class="calcular">05.98</td>
                </tr>
                <tr>
                    <td>03</td>
                    <td>Ciclano</td>
                    <td class="calcular">25.00</td>
                </tr>
                <tr>
                    <td> &nbsp; </td>
                    <td> &nbsp; </td>
                    <td> &nbsp; </td>
                </tr>
                <tr>
                    <td> TOTAL </td>
                    <td> &nbsp; </td>
                    <td id="total"> &nbsp; </td>
                </tr>
            </table>

Use a função Number() quando seu script não estiver preocupado com a precisão do valor e preferir deixar que a string de origem controle se o valor é um número de ponto flutuante ou um inteiro.

O operador + pode te surpreender, dependendo da forma que você o usa.

  • Todo mundo sabe que o operador + serve para ao menos duas coisas: somar números e concatenar strings!

Ao invés de usar a função Number ou parseFloat poderíamos usar o próprio operador + para converter-lo em numero.

Veja como:

resultado += +(linha[i].innerHTML);

Testando

     var linha=document.getElementsByClassName("calcular");
     var resultado=document.getElementById('total').innerHTML = 0;

         for (var i=0; i < linha.length; i++) {
             resultado += +(linha[i].innerHTML);
         }

     document.getElementById("total").innerHTML = resultado.toFixed(2);
            table {
                margin: 5px;
                float: left;
                width: 564px;
                padding: 6px;
                font-weight: bold;
                font-size: 10pt;
                color: white;
                text-align: center;
            }

            th {
                background-color: slateblue;
                color: white;
            }

            tr td {
                background-color: white;
                color: black;
                text-align: center;
            }
    <table>
                    <tr>
                        <th>ID</th>
                        <th>NOME</th>
                        <th>VALOR</th>
                    </tr>
                    <tr>
                        <td>01</td>
                        <td>Beltrano</td>
                        <td class="calcular">10.50</td>
                    </tr>
                    <tr>
                        <td>02</td>
                        <td>Fulano</td>
                        <td class="calcular">05.98</td>
                    </tr>
                    <tr>
                        <td>03</td>
                        <td>Ciclano</td>
                        <td class="calcular">25.00</td>
                    </tr>
                    <tr>
                        <td> &nbsp; </td>
                        <td> &nbsp; </td>
                        <td> &nbsp; </td>
                    </tr>
                    <tr>
                        <td> TOTAL </td>
                        <td> &nbsp; </td>
                        <td id="total"> &nbsp; </td>
                    </tr>
                </table>

O sinal de mais + é considerado sobrecarregado, o que significa que ele realiza uma ação diferente, dependendo do seu contexto.

3

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 .