Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Como fazer para não adicionar à tabela quando os elementos estão nulos

Referente ao curso JavaScript: programando na linguagem da web, no capítulo Eventos, Formulários e Criando Elementos e atividade Adicionando pacientes na tabela

por Nayara
| 103.8k xp | 16 posts

Tentei colocar o operador if para verificar se nome, peso, altura e gordura do formulário estavam nulos, só que mesmo assim a linha em branco foi adicionada. Como tratar esse erro?

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;

    if (nome != "null" && peso != "null" && altura != "null" && gordura != "null") {

        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;

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

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

        tabela.appendChild(pacienteTr);
      }
2 respostas
por Laís Cavalcanti
| 2577.8k xp | 4815 posts
Instrutor

Oi, Nayara, tudo bem?

A sua lógica está correta, mas null é um valor literal do Javascript, portanto, é uma palavra reservada, não precisando você passar entre aspas. E para complementar, o else irá te ajudar concluir a operação. Em mais aulas a frente, o instrutor irá demonstrar como tornar essas captação de erros mais interessante para o usuário, mas por hora, já conseguimos evitar que entrem campos vazios no form, ficando dessa forma:

 if (nome !== null && peso !== null && altura !== null && gordura !== null) {
        console.log("Não pode adiconar campos vazios")
    } else {
        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;

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

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

        tabela.appendChild(pacienteTr);

    }

Testa e me fala se deu certo!

solução!
por Nayara
| 103.8k xp | 16 posts

Olá, o professor mudou o código distribuindo-o em novas funções, então consegui fazer desta forma:

botaoAdicionar.addEventListener("click", function(event) {
    event.preventDefault();

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

    var paciente = obtemPacienteDoFormulario(form); 

    if(paciente.nome == "" || paciente.peso == "" || paciente.altura == "" || paciente.gordura == "") {
        console.log("Não pode adicionar campos vazios");
    } else {
        var pacienteTr = montaTr(paciente);

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

        tabela.appendChild(pacienteTr);

        form.reset();
    }
});