1

Não consigo fazer mostrar o total de preço no seu respectivo campo.

let acum = 0
document.querySelectorAll("[td]").forEach(elemento => {
    let valorComponente = () => elemento.textContent
    let retiraVirgula = () => valorComponente.replace(",", ".")
    let conversao = () => parseFloat(retiraVirgula)
    acum = acum + retiraVirgula
    document.querySelector("[tdTotal]").textContent = acum
})
table {
    border-collapse: none;
}

td {
    padding: 10px;
}

thead {
    font-weight: bold;
    background-color: rgb(27, 27, 27);
    color: white;
}

tbody tr:hover {
    background-color: rgb(155, 155, 155);
    color: white;
}
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Teste tabela</title>
</head>
<body>
    <table border="1">
        <caption>Registro Animais</caption>
        <thead>
            <tr>
                <td>Nome</td>
                <td>Raça</td>
                <td>Peso</td>
                <td>Latido</td>
                <td>Preço</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Billy</td>
                <td>Poodle</td>
                <td>15kg</td>
                <td>Fino</td>
                <td td>400,00</td>
            </tr>
            <tr>
                <td>Joke</td>
                <td>pastor alemao</td>
                <td>40kg</td>
                <td>grosso</td>
                <td td>2000,00</td>
            </tr>
            <tr>
                <td>Jow</td>
                <td>Poodle</td>
                <td>22kg</td>
                <td>Fino</td>
                <td td>1400,00</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="4">Total</td>
                <td tdTotal></td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

1 Resposta 1

0

Isso aqui está errado:

valorComponente = () => elemento.textContent

Você sabe o que é essa sintaxe (() => etc...)? Você está criando uma arrow function, ou seja, valorComponente é uma função que retorna o valor de elemento.textContent. Mas o que você quer não é uma função, e sim o próprio valor. Então mude isso para:

valorComponente = elemento.textContent

O mesmo vale para as demais variáveis, em todas elas você criou funções em vez de pegar o valor.

Além disso, no acumulador você deve somar o valor numérico (ou seja, o resultado de parseFloat), e não a string retiraVirgula:

acum = acum + conversao;

Ou seja:

let acum = 0;
document.querySelectorAll("[td]").forEach(elemento => {
    let valorComponente = elemento.textContent;
    let retiraVirgula = valorComponente.replace(",", ".");
    let conversao = parseFloat(retiraVirgula);
    acum = acum + conversao;
    document.querySelector("[tdTotal]").textContent = acum.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' });
})
table {
    border-collapse: none;
}

td {
    padding: 10px;
}

thead {
    font-weight: bold;
    background-color: rgb(27, 27, 27);
    color: white;
}

tbody tr:hover {
    background-color: rgb(155, 155, 155);
    color: white;
}
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Teste tabela</title>
</head>
<body>
    <table border="1">
        <caption>Registro Animais</caption>
        <thead>
            <tr>
                <td>Nome</td>
                <td>Raça</td>
                <td>Peso</td>
                <td>Latido</td>
                <td>Preço</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Billy</td>
                <td>Poodle</td>
                <td>15kg</td>
                <td>Fino</td>
                <td td>400,00</td>
            </tr>
            <tr>
                <td>Joke</td>
                <td>pastor alemao</td>
                <td>40kg</td>
                <td>grosso</td>
                <td td>2000,00</td>
            </tr>
            <tr>
                <td>Jow</td>
                <td>Poodle</td>
                <td>22kg</td>
                <td>Fino</td>
                <td td>1400,00</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="4">Total</td>
                <td tdTotal></td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

Também coloquei ponto-e-vírgula no final das linhas. Pode parecer "frescura", e sei que o JavaScript "aceita" o código sem ponto e vírgula e "funciona", mas isso evita algumas situações bizarras que podem ocorrer se você não usá-los, como essa e essa (veja mais sobre isso aqui).

2
  • Obrigado pela resposta, me ajudou a entender o erro. 22/01/2021 às 19:44
  • 1
    @AlessanderJúnio Se a resposta resolveu o seu problema, vc pode aceitá-la, veja aqui como e porque fazê-lo. Não é obrigatório, mas é uma boa prática do site, para indicar a futuros visitantes que aquilo resolveu o problema
    – hkotsubo
    22/01/2021 às 19:46

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 .