Entrar Ainda não tem acesso?
11
respostas

O console diz " Uncaught TypeError: Cannot read property 'nome' of null at ButtonElemHTMLent.<anonymous> (principal.js:47)" Já copiei tudo oq o professor faz e não funciona

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 Sérgio Frederick Santos Damasceno
| 56.5k xp | 27 posts

Já não sei mais oq fazer e não tô conseguindo avançar

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;
    imcTd.textContent = imc;


});

titulo.addEventListener("click",function (){
    console.log("Fui clicado");
});
11 respostas
por Mateus Henrique
| 989.4k xp | 1546 posts
Instrutor Desenvolvedor

Fala Fred, tudo bem?

Poderia mostrar o seu html por favor?

por Sérgio Frederick Santos Damasceno
| 56.5k xp | 27 posts
<section class="container">
            <h2 id="titulo-form">Adicionar novo paciente</h2>
            <form class="form-adiciona">
                <div class="grupo">
                    <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" 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>

        <script src="js/principal.js"></script>
    </body>
</html>
por Giovanne da Silva Santos
| 37.5k xp | 15 posts

Estou com a mesma duvida...

por Mateus Henrique
| 989.4k xp | 1546 posts
Instrutor Desenvolvedor

Fred, na hora de usar o querySelector para selecionar o seu formulário, você utilizou #formulario-adiciona ao invés de .formulario-adiciona por que o formulario tem uma classe, e não um id.

por Giovanne da Silva Santos
| 37.5k xp | 15 posts

Mas Matheus, o professor usa "#", alterei o meu código e coloquei o ".", porém ainda continua com o mesmo erro, após isso, tentei colar um "id" no form, até ai deu certo porem surgiu outro erro : Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'. at HTMLButtonElement.,

por Mateus Henrique
| 989.4k xp | 1546 posts
Instrutor Desenvolvedor

Pode mandar o seu código html e js por completo por favor?

por Giovanne da Silva Santos
| 37.5k xp | 15 posts
</head>
<body>

    <header>
        <div class="container">
            <h2 class="titulo">Aparecida Nutrição</h2>
        </div>
    </header>
    <main>
        <section class="container">
            <h2>Meus pacientes</h2>
            <table>
                <thead>
                    <tr>
                        <th>Nome</th>
                        <th>Peso(kg)</th>
                        <th>Altura(m)</th>
                        <th>Gordura Corporal(%)</th>
                        <th>IMC</th>
                    </tr>
                </thead>
                <tbody id="tabela-pacientes">
                    <tr class="paciente" id="primeiro-paciente">
                        <td class="info-nome">Paulo</td>
                        <td class="info-peso">100</td>
                        <td class="info-altura">2.00</td>
                        <td class="info-gordura">10</td>
                        <td class="info-imc">0</td>
                    </tr>

                    <tr class="paciente" >
                        <td class="info-nome">João</td>
                        <td class="info-peso">80</td>
                        <td class="info-altura">1.72</td>
                        <td class="info-gordura">40</td>
                        <td class="info-imc">0</td>
                    </tr>

                    <tr class="paciente" >
                        <td class="info-nome">Erica</td>
                        <td class="info-peso">54</td>
                        <td class="info-altura">1.64</td>
                        <td class="info-gordura">14</td>
                        <td class="info-imc">0</td>
                    </tr>

                    <tr class="paciente">
                        <td class="info-nome">Douglas</td>
                        <td class="info-peso">85</td>
                        <td class="info-altura">1.73</td>
                        <td class="info-gordura">24</td>
                        <td class="info-imc">0</td>
                    </tr>
                    <tr class="paciente" >
                        <td class="info-nome">Tatiana</td>
                        <td class="info-peso">46</td>
                        <td class="info-altura">1.55</td>
                        <td class="info-gordura">19</td>
                        <td class="info-imc">0</td>
                    </tr>
                </tbody>
            </table>

        </section>
    </main>

    <!-- ... -->
    <section class="container">
<h2 id="titulo-form">Adicionar novo paciente</h2>
<form>
    <div class="grupo">
        <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" 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>
    <script src="js/principal.js" ></script>

</body>
por Giovanne da Silva Santos
| 37.5k xp | 15 posts
var titulo = document.querySelector(".titulo");
titulo.textContent = "Aparecida Nutricionista";

var pacientes = document.querySelectorAll(".paciente");

for(var i = 0; i < pacientes.length ; i++){

 var paciente = pacientes[i];

 var tdPeso = paciente.querySelector(".info-peso");
 var peso = tdPeso.textContent;

 var tdAltura = paciente.querySelector(".info-altura");
 var altura = tdAltura.textContent;

 var tdImc = paciente.querySelector(".info-imc");

 var pesoEhValido = true;
 var alturaEhValida = true;

 if (peso <= 0 || peso >= 1000) {
     console.log("Peso inválido!");
     pesoEhValido = false;
     tdImc.textContent = "Peso inválido";
     paciente.classList.add("paciente-invalido");
 }

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

 if (pesoEhValido && alturaEhValida) {
     var imc = peso / (altura * altura);
     tdImc.textContent = imc.toFixed(2);
 }

}

titulo.addEventListener("click", function (){

});

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);

});

titulo.addEventListener("click",function (){

})
por Mateus Henrique
| 989.4k xp | 1546 posts
Instrutor Desenvolvedor

Giovanne, o método appendChild só consegue adicionar no final de um elemento HTML outro elemento HTML, nesse caso você está tentando adicionar um texto ao final do elemento pacienteTr, para funcionar, retire as aspas de nometd, pesotd, alturatd e gorduratd.

por Giovanne da Silva Santos
| 37.5k xp | 15 posts

Muito obrigado pela compreensão Matheus, desculpa o incomodo, parabéns pelo ótimo trabalho!!

por Mateus Henrique
| 989.4k xp | 1546 posts
Instrutor Desenvolvedor

Denada Giovanne! Não é incomodo nenhum, fico feliz em ajuda-lo :D