Doubt JS code

Asked

Viewed 36 times

1

I cannot show the total price in your respective field.

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>

javascript

1 answer

0

This is all wrong:

valorComponente = () => elemento.textContent

You know what this syntax is (() => etc...)? You are creating a Arrow Function, that is to say, valorComponente is a function that returns the value of elemento.textContent. But what you want is not a function, but the value itself. So change that to:

valorComponente = elemento.textContent

The same goes for the other variables, in all of them you created functions instead of taking the value.

In addition, in the accumulator you must add the numerical value (i.e., the result of parseFloat), and not the string retiraVirgula:

acum = acum + conversao;

That is to say:

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>

I also put a semicolon at the end of the lines. It may sound "fresh," and I know that Javascript "accepts" the semicolon code and "works," but it avoids some bizarre situations that can occur if you don’t use them, like that one and that one (see more about this here).

  • Thanks for the reply, helped me understand the mistake.

  • 1

    @Alessanderjúnio If the answer solved your problem, you can accept it, see here how and why to do it. It is not mandatory, but it is a good practice of the site, to indicate to future visitors that it solved the problem

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.