Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Paciente não está sendo Add

Boa noite, pessoal!

Então, já tentei de todas as formas, revisei tanto o HTML quando o Javascript, ambos dentro da minha analise estão certo, porém quando tento rodar o cadastro de um novo paciente, ele simplismente recarrega a página. Segue abaixo meu código index.html e principal.js:

<!--Adicionando o formulário-->
    <section class="container">
        <h2 id="titulo-form">Cadastro de Paciente</h2>
        <form id="form-adiciona">
            <div class="grupo">
                <label for="nome">Nome:</label>
                <input id="nome" name="nome" type="text" placeholder="Nome do paciente" class="campo">
            </div>
            <div class="grupo">
                <label for="peso">Peso:</label>
                <input id="peso" name="peso" type="text" placeholder="Peso do paciente" class="campo campo-medio">
            </div>
            <div>
                <label for="altura">Altura:</label>
                <input id="altura" name="altura" type="text" placeholder="Altura do paciente" class="campo campo-medio">
            </div>
            <div>
                <label for="gordura">% de Gordura:</label>
                <input id="gordura" name="gordura" type="text" placeholder="Porcentagem de gordura do paciente" class="campo campo-medio">
            </div>

            <button id="cadastro-paciente" class="botao bto-principal">Cadastrar</button>

        </form>
    </section>
</main>

<script src="js/principal.js" ></script>

Código script


var titulo = document.querySelector(".titulo");

titulo.textContent = "Aparecida Nutricionista";

// declarando as variáveis 
var pacientes = document.querySelectorAll(".paciente");

// criando uma estrutura de repetição para que a ação calcular imc passe por todos os pacientes
for(var i = 0; i < pacientes.length;i++){
    var paciente = pacientes[i];
    var tdPeso = paciente.querySelector(".info-peso");
    var tdAltura = paciente.querySelector(".info-altura");
    // buscando o contéudo dentro das tags
    var peso = tdPeso.textContent;
    var altura = tdAltura.textContent;

    // criando variável que irá fazer o calculo do IMC
    var tdImc = paciente.querySelector(".info-imc");

    // verificando se os dados da tabela estão corretos
    var pesoValido = true;
    var alturaValida = true;

    if (peso <= 0 || peso >= 1000){
        tdImc.textContent = "Peso inválido!";
        // a variavel agora é falsa
        pesoValido = false;
        // estilizando nossa validação
        paciente.classList.add("paciente-invalido");
    }

    if (altura <= 0 || altura >= 3){
        tdImc.textContent = "Altura inválida!";
        alturaValida = false;
        paciente.classList.add("paciente-invalido");
    }

    if (pesoValido && alturaValida){
        var imc = peso / (altura*altura);
        // apresentando resultado da conta na tabela
        tdImc.textContent = imc.toFixed(2);
    } else {
        tdImc.textContent = "Peso e/ou Altura estão inválidos!"
    }
}

var botaoCadastrar = document.querySelector("#cadastro-paciente");

botaoCadastrar.addEventListener("click",function(event){
    event.preventDefault();
    // declarando as variáveis form para indicar a inclusão de novos pacientes a tabela
    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;
    // para pegar os valores informados dentro dos inputs usamos o.value pra buscar esse valor

    var CadPacienteTr = document.createElement("tr");

    var CadnomeTr = document.createElement("td");
    var CadpesoTr = document.createElement("td");
    var CadAlturaTr = document.createElement("td");
    var CadGorduraTr = document.createElement("td");
    var CadImcTr = document.createElement("td");

    CadnomeTr.textContent = nome;
    CadpesoTr.textContent = peso;
    CadAlturaTr.textContent = altura;
    CadGorduraTr.textContent = gordura;

    CadPacienteTr.appendChild(CadnomeTr);
    CadPacienteTr.appendChild(CadpesoTr);
    CadPacienteTr.appendChild(CadAlturaTr);
    CadPacienteTr.appendChild(CadGorduraTr);

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

    tabela.appendChild(CadPacienteTr);

});

Por favor me ajudem....

2 respostas
solução!

Igor, copiei e executei esses trechos de código html e javascript que citou, e o problema estava neste trecho:

var titulo = document.querySelector(".titulo");

titulo.textContent = "Aparecida Nutricionista";

Acontece que, ao menos no trecho de html que citou, a classe 'titulo' não está sendo utilizada em nenhuma tag, o que fazia com que var titulo = document.querySelector(".titulo"); retorne null como valor, o que gera um erro ao tentar executar o titulo.textContent = "Aparecida ...". Para solucionar esse problema, removi esse trecho de código.

Mas, como citei, essa é uma conclusão tirada observando apenas o seu trecho de código citado.

Obrigado Cândido, removi esse trecho do código e rodou perfeitamente.