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

Me ajudem a encontrar o erro do meu script

Referente ao curso JavaScript: programando na linguagem da web

por Aretha de Albuquerque Santiago Martins
| 127.5k xp | 5 posts

Bom dia! Dúvida referente a aula 4 sobre inserir dados na tabela pelo javascript. O primeiro código é o meu código, e o segundo é o do professor. Não consigo identificar o que escrevi de errado, qnd tento pelo meu codigo nao funciona e pelo codigo copiado e colado sim, mas gostaria de entender o por que. Em um ambiente real eu nao terei como ficar copiando e colando e mesmo vendo e revendo várias vezes nao acho o 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;

    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);
    gorduraTd.appendChild(gorduraTd);

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

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

});
5 respostas
por Giovanna Moeller
| 624.1k xp | 892 posts
Instrutor iOS Software Engineer

Oi Aretha, tudo bem? Você poderia me mandar seu código HTML para eu conseguir te auxiliar melhor?

Fico no aguardo, muito obrigada!

por Aretha de Albuquerque Santiago Martins
| 127.5k xp | 5 posts
<section class="container">
            <h2 id="titulo-form">Adicionar novo paciente</h2>
            <form id="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/calculaImc.js"></script>
        <script src="js/form.js"></script>
    </body>
</html>

Ah sim..

por Marcos Junior
| 12.4k xp | 4 posts

Olá Aretha, tudo bem?

Na estrutura HTML as tabelas são identificadas pela tag <table> e podem ser divididas em linhas (<tr>). Cada linha pode ser dividida em uma ou mais células de dados (<td>).

No trecho abaixo do seu código você está criando a <tr> do seu paciente e as <td>:

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

porém quando você está adicionando os filhos ao <tr>, você também está tentando adicionar um filho ao <td> gorduraTd:

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

Para corrigir, você precisa dar o appendChild do seu <td> gorduraTd no seu <tr> pacienteTr, ficando conforme escrito abaixo:

    pacienteTr.appendChild(gorduraTd);

Tenta refazer o teste com essa correção e me avisa se deu tudo certo ;)

por Aretha de Albuquerque Santiago Martins
| 127.5k xp | 5 posts

oi Marcos tudo sim e vc? Deu certo sim!!! Eu tinha certeza que eu tinha escrito algo errado e não estava conseguindo encontrar... Estou justamente tentando exercitar essa atenção extrema que temos que ter para programar hahaha.. Muto obrigada a você e a Giovanna Moeller que também estava analisando

solução!
por Marcos Junior
| 12.4k xp | 4 posts

Tudo ótimo por aqui! Ah que massa que deu certo. Sim sim hahaha, com o tempo a nossa atenção vai melhorando, a dica é sempre adotar boas práticas e manter uma padronização no seu código referente a organização, nomenclaturas de variáveis, objetos, etc... Isso tudo ajuda a identificarmos problemas mais facilmente, aí no caso do javascript, recomendo sempre ficar de olho no console do navegador que estiver utilizando para testar seus códigos, pois quase sempre a descrição do erro é assertiva, e facilita na correção dele ;)

Se puder marcar minha resposta como a solução, agradeço muito XD