Ainda não tem acesso? Estude com a gente! Matricule-se
Ainda não tem acesso? Estude com a gente! Matricule-se

Solucionado (ver solução)

Como somar células?

Eu queria aperfeiçoar o procura então decidi criar um lugar onde soma e exibe todos os pontos que a pessoa tem acumulado.

Ou seja, como na foto abaixo o produto "Tônico Barba Brasil" já está adicionado e eu adicionei o "exemplo1" para mostrar que a função de adicionar produto e converter o valor do produto em pontos funciona.

Mas eu gostaria de somar todos os pontos da coluna "Pontos Acumulados" e transferisse para a coluna abaixo "Total de Pontos Acumulados".

Joguei a fórmula abaixo e não deu certo, ela fica exibindo na minha célula, não faço a mínima ideia de como crio uma função para somar isso, já vi e revi as aulas do curso :(

Até deixei os nomes dos modelos que peguei do curso igual do curso, para não dar nada errado rsrsrs

Imagem da tela:

https://ibb.co/vDSMBf7

Código JS:


function somaPontos () {
  var capturaPontos = document.querySelectorAll(".info-imc");
  var pontos = capturaPontos.textContent;
}

var pontosAcumulados = document.querySelector(".pontos-acumulados");
pontosAcumulados.textContent = somaPontos;

var pacientes = document.querySelectorAll("#pontos-total");

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

    var paciente = pacientes[i];

    var tdImc = paciente.querySelector(".info-imc");

}

Código HTML:


<!DOCTYPE html>
<html lang="pt-br">
<meta charset="UTF-8">

<head>
<title> Conversor de Pontos BB </title>
    <link rel="icon" href="calculadora1.png">
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Crimson+Text:400,400italic,600">
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700">
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="pontos.css">
</head>

<body>
    <main>
        <h1 id="titulo" class="titulo-principal">"Calcule abaixo os seus Pontos Barba"</h1>
        <br>
        <br>
        <h2>Adicione o nome e o produto na tabela abaixo e veja quantos pontos você ganhou:</h2>
        <br><br>
        <ul>
            <section class="container">
                <table>
                    <thead>
                        <tr>
                            <th>Nome do Produto</th>
                            <th>Valor</th>
              <th>Pontos Acumulados</th>
                        </tr>
                    </thead>
                    <tbody id="tabela-pacientes">
                        <tr class="paciente" id="primeiro-paciente">
                            <td class="info-nome">Tônico Barba Brasil</td>
                            <td class="info-peso">129</td>
              <td class="info-imc">92.14</td>
                        </tr>
                    </tbody>
                </table>
                <br>
                                <section class="container">
                        <table>
                            <thead>
                                <tr>
                                    <th>Total de Pontos Acumulados</th>
                                </tr>
                            </thead>
                            <tbody id="pontos-total">
                                <tr class="" id="totalizando">
                                    <td class="pontos-acumulados">0</td>
                                </tr>
                            </tbody>
                            <br><br>
                                        </table>
                                        <br><br>
                <h2>Preencha os dados abaixo para acessar a pontuação do produto:</h2>
                <br><br>
                    <h2 id="titulo-form">Verificar Pontuação do Produto: </h2>
                    <ul id="mensagens-erro"></ul>
                    <form id="form-adiciona">
                        <div class="grupo">
                            <label for="nome">Nome do Produto:</label>
                            <input id="nome" name="nome" type="text" placeholder="digite o nome do seu paciente" class="campo">
                        </div>
                        <div class="grupo">
                            <label for="peso">Valor do Produto:</label>
                            <input id="peso" name="peso" type="text" placeholder="digite o peso do seu paciente" class="campo campo-medio">
                        </div>
                            <button id="adicionar-paciente" class="botao bto-principal">Adicionar</button>
                        <br>
                    </form>
                            <br>
                            <br>
                </section>
    </main>
            <script src="calcula-pontos.js"></script>
                        <script src="pontosAcumulados.js"></script>
</body>
</html>
20 respostas

Oi Fabio tudo bem?

No ponto que você está do curso é normal não ter experiência para conseguir bolar algo novo e diferente.

Eu posso te ajudar de duas formas, uma é analisar com você o porquê está dando errado (mais demorada rsrsrsrs, por causa das nossas rotinas de responder um ao outro) e a segunda é eu pegar seu projeto no github e fazer o código para você.

Qual prefere?

Bom, gostaria do segundo, de você bolar o código pra mim, ai depois eu analiso ele e se não entender eu te pergunto :)

Muito obrigado, desde já!

Ótimo, se puder colocar o projeto no github já programo assim que possível.

Oi Fábio.

Fiz as modificações e mandei um pull request pelo github (o bom que vc já vai se familiarizando também com o github) . O link direto do fork do seu repositório é https://github.com/neoandrevictor/calculadoradepontos

Ele soma a célula que já ta criada, mas não permite criar um novo produto :(

No meu computador está funcionando normalmente.

Você está acessando a página calculadoradepontos-master/paginaPontos.html ?

Colocando o produto e clicando em adcionar?

Modifiquei meu programa, agora ele adiciona o produto e já faz o calculo do IMC e joga na outra tabela.

Mas eu não consigo criar uma função para somar todos os valores da coluna Pontos Acumulados dos produtos que eu adiciono.

Imagem: https://ibb.co/Hhg2GSm

Código JS completo:

var botaoAdicionar = document.querySelector("#adicionar-paciente");
botaoAdicionar.addEventListener("click", function(event) {
    event.preventDefault();

    var form = document.querySelector("#form-adiciona");

    var paciente = obtemPacienteDoFormulario(form);


    adicionaPacienteNaTabela(paciente);

});

var contaImc = 0.72;


function adicionaPacienteNaTabela(paciente){
    var pacienteTr = montaTr(paciente);
    var tabela = document.querySelector("#tabela-pacientes");
    tabela.appendChild(pacienteTr);
}

function obtemPacienteDoFormulario(form){

    var paciente = {
        nome: form.nome.value,
        peso: form.peso.value,
        imc: calculaImc(peso, contaImc)

   }

   return paciente;
}

function calculaImc(peso, formulaPontos) {
      var imc = 0;
      imc = peso.value * contaImc;
      return imc.toFixed(2);
}


function montaTr(paciente){
    var pacienteTr = document.createElement("tr");
    pacienteTr.classList.add("paciente");

    pacienteTr.appendChild(montaTd(paciente.nome, "info-nome"));
    pacienteTr.appendChild(montaTd(paciente.peso, "info-peso"));
    pacienteTr.appendChild(montaTd(paciente.imc, "info-imc"));

    return pacienteTr;
}

function montaTd(dado,classe){
    var td = document.createElement("td");
    td.textContent = dado;
    td.classList.add(classe);
    return td;
}

function pontosAcumulados(){
    var pontos = 0;
    pontos = $(".info-imc").text();

}

OBS: não consegui usar o github

Oi Fabio,

Dei uma mudada no código.

O que eu fiz abaixo foi trazer a função que tinha criado anteriormente a somaPontos de volta pro código e chamo ela no final da função adicionaPacienteNaTabela(paciente)



function somaPontos() {
  acumulado = 0;
  var capturaPontos = document.querySelectorAll(".info-imc");
  for (celula of capturaPontos) {

    acumulado = acumulado + celula.innerText * 1;

  }

  document.getElementsByClassName("pontos-acumulados")[0].innerText = acumulado;

}

var botaoAdicionar = document.querySelector("#adicionar-paciente");
botaoAdicionar.addEventListener("click", function(event) {
    event.preventDefault();

    var form = document.querySelector("#form-adiciona");

    var paciente = obtemPacienteDoFormulario(form);


    adicionaPacienteNaTabela(paciente);

});

var contaImc = 0.72;


function adicionaPacienteNaTabela(paciente){
    var pacienteTr = montaTr(paciente);
    var tabela = document.querySelector("#tabela-pacientes");
    tabela.appendChild(pacienteTr);
    somaPontos();
}

function obtemPacienteDoFormulario(form){

    var paciente = {
        nome: form.nome.value,
        peso: form.peso.value,
        imc: calculaImc(peso, contaImc)

   }

   return paciente;
}

function calculaImc(peso, formulaPontos) {
      var imc = 0;
      imc = peso.value * contaImc;
      return imc.toFixed(2);
}


function montaTr(paciente){
    var pacienteTr = document.createElement("tr");
    pacienteTr.classList.add("paciente");

    pacienteTr.appendChild(montaTd(paciente.nome, "info-nome"));
    pacienteTr.appendChild(montaTd(paciente.peso, "info-peso"));
    pacienteTr.appendChild(montaTd(paciente.imc, "info-imc"));

    return pacienteTr;
}

function montaTd(dado,classe){
    var td = document.createElement("td");
    td.textContent = dado;
    td.classList.add(classe);
    return td;
}

function pontosAcumulados(){
    var pontos = 0;
    pontos = $(".info-imc").text();

}

Espero ter ajudado!!!

Show, somou certinho, não conheço algumas funções do soma ponto não, vou procurar saber.

Uma pergunta: a soma deu muitas dizimas periodicas, não consegui consertar com a função toFixed(2).

Onde que coloco para arrendondar?

solução

Coloca na linha 12 do meu código:

  document.getElementsByClassName("pontos-acumulados")[0].innerText = acumulado.toFixed(2);

Show!

Deu certinho André, muito obrigado!

Estou aprendendo programação sozinho, assisti vários cursos já, cerca de 7 cursos no alura, mas fico na dúvida e esqueço muitas coisas, deveriam ter um resumo dos comandos em uma apostila.

Se tiver um material desse agradeço, até pq vc responde rápido, mas em outros tópicos do fórum não há resposta.

Não conheço nenhum programador para me tirar dúvidas rsrsrs

Disponha!!!

Temos apostilas grátis de alguns cursos da Caelum (mesma empresa da Alura só que presencial) https://www.caelum.com.br/apostilas

Lá tem de javascript e web em geral.

Eu faço o possível para responder rápido e todos os tópicos que tenho conhecimento.

Bons estudos!!!

Muito obrigado!

To apanhando demais, mas uma hora da certo rsrsrs

Persistência e planejamento são as chaves para o sucesso!!!

Tenho de sobra, valeuuuu!

Mais uma dúvida, como eu limpo o campo depois que a pessoa já adicionou algum produto?

Você pode usar o form reset, dá uma olhada https://www.w3schools.com/jsref/met_form_reset.asp

Valeu consegui usando o form.reset().

Disponha!