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

form retorna como Null

Acabei de finalizar o módulo 4 e quando fui testar o meu código da o seguinte retorno no navegador:

form.js:7 Uncaught TypeError: Cannot read property 'nome' of null
    at HTMLButtonElement.<anonymous> (form.js:7)
(anonymous) @ form.js:7

form.js :

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;

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

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

    tabela.appendChild(pacienteTr);
});

html do form:


        <form>
            <section class="container">
                <h2 id="titulo-form">Adicionar novo paciente</h2>
                <form id="form-adiciona">
                    <div class="">
                        <label for="nome">Nome:</label>
                        <input id="nome" name="nome" type="text" placeholder="digite o nome do seu paciente" class="campo">
                    </div>
                    <div class="grupo">
                        <label for="peso">Peso:</label>
                        <input id="peso" name="peso" type="text" placeholder="digite o peso do seu paciente" class="campo campo-medio">
                    </div>
                    <div class="grupo">
                        <label for="altura">Altura:</label>
                        <input id="altura" name="altura" type="text" placeholder="digite a altura do seu paciente" class="campo campo-medio">
                    </div>
                    <div class="grupo">
                        <label for="gordura">% de Gordura:</label>
                        <input id="gordura" name="gordura" type="text" placeholder="digite a porcentagem de gordura do seu paciente" class="campo campo-medio">
                    </div>

                    <button id="adicionar-paciente" class="botao bto-principal">Adicionar</button>
                </form>
            </section>
        </form>
1 resposta
solução!

Olá Gustavo! Tudo bem?

Vamos lá, pelo que vi no seu código HMTL, você está incluindo um form dentro de outro form. Em meus testes, de algum modo isso está causando o erro que você apresentou causando meio que uma redundância.

Então, primeiro você deve remover o primeiro conjunto de tag

<form></form>

, certo?

Após isso, se você testar o código, ele também apresentará um erro. Nas seguintes linhas:

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

Lembre-se de adicionar ao seu código HTML a tag com o id correspondente, pois você está referenciando um objeto com o id tabela-pacientes e se ele não existir, será retornado um erro. Para resolver crie o objeto correspondente, por exemplo:

<table id="minhaTabela"></table>

Espero ter ajudado ^^.

@edit Descupe a confunsão, quando falo objeto quero me referir ao componente!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software