Após inserir uma linha e os dados do novo paciente na células da mesma,caso reinicie a página esta linha com recém criada é apagada. Como manter a uma nova linha inserida,com os dados do novo paciente,após reiniciar a página,mesmo sem usar a tag
...?HTML
<section class="container">
<h2> Adicionar novo paciente</h2>
<p class="paragrafoI">Nome</p>
<input size="109" type="text" id="nome" class="campo-entradaI">
<p class="paragrafoII">Peso</p>
<p class="paragrafoIII">Altura</p>
<p class="paragrafoIV"> % de Gordura</p>
<div class="campodeentrada">
<input size="20" type="text" id="peso">
<input size="20" type="text" id="altura" >
<input size="20" type="text" id="gordura">
</div>
<button id="append">Adicionar</button>
<!--button.onclick= -->
</section>
CSS
paragrafoI{
position: absolute;
left: 265px;
}
.paragrafoII{
position: absolute;
left: 265px;
margin-top: 60px ;
}
.paragrafoIII{
position: absolute;
left: 450px;
margin-top: 60px ;
}
.paragrafoIV{
position: absolute;
left: 630px;
margin-top: 60px ;
}
.campodeentrada{
display: inline-block;
position: relative;
margin-top: 80px ;
}
.campo-entradaI{
position: absolute;
font-size: "18px";
font-family: "Arial, Helvetica, sans-serif";
left: 265px;
margin-top: 20px;
}
JAVASCRIPT
var adicionar=document.querySelector("#append"); // associa o botão "button" a variável adicionar.
adicionar.addEventListener("click",NovoPaciente);
function NovoPaciente(){
var nome_novoPaciente=document.getElementById("nome").value;
var peso_novoPaciente=document.getElementById("peso").value;
var altura_novoPaciente=document.getElementById("altura").value;
var gordura_novoPaciente=document.getElementById("gordura").value;
//cálculo do IMC
imc = (peso_novoPaciente/(altura_novoPaciente * altura_novoPaciente)).toFixed(2);
// cria a nova linha (tr) na tabela.
var novoPacienteTr=document.createElement("tr");
// cria as células para nova linha (tr) criada acima.
var nome_novoPacienteTd=document.createElement("td");
var peso_novoPacienteTd=document.createElement("td");
var altura_novoPacienteTd=document.createElement("td");
var gordura_novoPacienteTd=document.createElement("td");
var imcTd=document.createElement("td");
// console.log(gordura_novoPacienteTd);
// passa os valores para as novas células recém criadas.
nome_novoPacienteTd.textContent = nome_novoPaciente;
peso_novoPacienteTd.textContent = peso_novoPaciente;
altura_novoPacienteTd.textContent = altura_novoPaciente;
gordura_novoPacienteTd.textContent= gordura_novoPaciente;
imcTd.textContent=imc;
// insere as células com seus valores preenchidos,na nova linha (tr).
novoPacienteTr.appendChild(nome_novoPacienteTd);
novoPacienteTr.appendChild(peso_novoPacienteTd);
novoPacienteTr.appendChild(altura_novoPacienteTd);
novoPacienteTr.appendChild(gordura_novoPacienteTd);
novoPacienteTr.appendChild(imcTd);
// insere a nova linha(tr) com suas células preenchidas,na tabela.
var tbody=document.querySelector("tbody"); // tag html tbody associada à variável tbody.
tbody.appendChild(novoPacienteTr);