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

não add o paciente

Referente ao curso JavaScript: programando na linguagem da web, no capítulo Eventos, Formulários e Criando Elementos e atividade Mãos na Massa: Adicionando um paciente na tabela

por Adriano Becco Nunes
| 121.3k xp | 18 posts

Não está add o paciente, só que quando aperta no botão, os dados nao desaparecem

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

    tabela.appendChild(pacienteTr);
});
4 respostas
por Edwin Bulata Pancoti
| 127.9k xp | 57 posts
Desenvolvedor

Boa tarde Adriano,

Testei seu código aqui e o alerta de erro que recebi foi no final do código na definição da variável tabela:

var tabela = document.querySelector("#tabela=paciente");

= (igual) não é um nome de seletor válido, troquei para - (hífen) e funcionou corretamente.

Mas se entendi sua pergunta, você deseja limpar os campos do formulário após adicionar os dados na tabela, é isso? Caso seja, basta adicionar esse trecho ao final do código, após "tabela.appendChild(pacienteTr);":

form.nome.value = '';
form.peso.value = '';
form.altura.value = '';
form.gordura.value = '';
por Adriano Becco Nunes
| 121.3k xp | 18 posts

Corrigi aquele erro, mas mesmo assim não adiciona na tabela

por Edwin Bulata Pancoti
| 127.9k xp | 57 posts
Desenvolvedor

Bom dia Adriano,

Não aparece mensagem de erro no console (ferramentas do desenvolvedor) no navegador?

Eu testei seu código aqui e funcionou certinho, pode ser que seu problema esteja no html então, segue meu teste completo pra você comparar:

<!doctype html>
<html lang="pt-br">
    <head>

    </head>
    <body>
        <form id="form-adiciona">
            <input type="text" name="nome">
            <input type="text" name="peso">
            <input type="text" name="altura">
            <input type="text" name="gordura">
            <input type="button" id="adicionar-paciente" value="Adicionar">
        </form>

        <table id="tabela-paciente"></table>

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

                tabela.appendChild(pacienteTr);
            });

        </script>
    </body>
</html>

Se atente se os ID's no html no botão, formulário e tabela estão corretos. Att.

solução!
por Edwin Bulata Pancoti
| 127.9k xp | 57 posts
Desenvolvedor

Boa tarde, conseguiu Adriano?