Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Novo paciente some quando recarrega a página

O código está funcionando bem. Adiciono o novo paciente à tabela através do formulário e calcula o IMC. Porém, quando recarrego a página esse novo paciente some. Como posso impedir que ele suma?

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

    event.preventDefault();

    var form = document.querySelector("#form-adiciona");
    var nome = form.nome.value;
    var peso = form.peso.value;
    var altura = form.altura.value;
    var gordura = form.gordura.value;

    var pacienteTr = document.createElement("tr");
    var nomeTd = document.createElement("td");
    var pesoTd = document.createElement("td");
    var alturaTd = document.createElement("td");
    var gorduraTd = document.createElement("td");
    var imcTd = document.createElement("td");

    nomeTd.textContent = nome;
    pesoTd.textContent = peso;
    alturaTd.textContent = altura;
    gorduraTd.textContent = gordura;

    function calculaImc (peso, altura) {
        var imc = 0;
        imc = peso / (altura * altura);
        return imc.toFixed(2)
    }

    imcTd.textContent = calculaImc(peso,altura);

    pacienteTr.appendChild(nomeTd);
    pacienteTr.appendChild(pesoTd);
    pacienteTr.appendChild(alturaTd);
    pacienteTr.appendChild(gorduraTd);
    pacienteTr.appendChild(imcTd);

    var tabela = document.querySelector("#tabela-pacientes");

    tabela.appendChild(pacienteTr);
});
1 resposta
solução!

Olá Ana Lúcia, tudo bom?

O que ocorre é que quando alteramos o DOM via Javascript, as alterações ali feitas ficam em tempo de execução, ou seja, não ficam armazenadas em nenhum repositório ou banco, nem mesmo criam novas linhas no arquivo Físico do HTML. Fica tudo no Browser.

Para que você salve essas alterações, é necessário adicionar essas novas linhas no documento HTML também, veja algumas formas de se fazer isso:

  1. Manipulando o arquivo físico do HTML com javascript.
  2. Armazenando as informações em um banco indexado.
  3. Armazenando as informações em um banco de dados.

Nehuma dessas é indicada para iniciantes, acredito eu. Mas se mesmo assim quiser tentar e tiver curiosidade sobre como funciona, veja esses links do StackOverFlow de como manipular arquivo e local storage:

https://stackoverflow.com/questions/18652901/read-and-modify-html-from-a-local-file-with-javascript

https://stackoverflow.com/questions/36186722/how-can-i-update-local-html-file-after-adding-new-element-using-javascript

Espero ter ajudado, até mais.