Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Como o JS consegue puxar os dados da função montaTd

Como o Java Script consegue saber as informações que queremos que ele puxe se estamos declarando palavras genéricas dentro dos parâmetros da função montaTd? Estamos usando "function montaTd(dado, classe) como o JS sabe que dados puxar? Aqui deu erro quando tentei adicionar um paciente novo seguindo o mesmo código do intrutor. O erro no console diz : form.js:69 Uncaught ReferenceError: Td is not defined at montaTd (form.js:69) at montaTr (form.js:41) at HTMLButtonElement. (form.js:15)

Segue o código do form.js abaixo

//função para detectar um click no botão
var botaoAdicionar = document.querySelector("#adicionar-paciente");
botaoAdicionar.addEventListener("click", function(event) {
    //função que impede o comportamento natural do HTML
    event.preventDefault();

    //busca dados dos pacientes inseridos no form
    var form = document.querySelector ("#form-adiciona");

    var paciente = obterPacienteFormulario(form);


    //cria tr e td dos pacientes no HTML
    var pacienteTr = montaTr(paciente);

    //adicoina paciente na tabela
    var tabela = document.querySelector ("#tabela-pacientes");

    tabela.appendChild(pacienteTr);

});

function obterPacienteFormulario(form) {
    var paciente = {
        nome: form.nome.value,
        peso: form.peso.value,
        altura: form.altura.value,
        gordura: form.gordura.value,
        imc: calculaImc(form.peso.value, form.altura.value)
    }

    return paciente;

}

function montaTr(paciente){
    var pacienteTr = document.createElement ("tr");
    pacienteTr.classList.add("paciente");

    var nomeTd = montaTd(paciente.nome, "info-nome");
    var pesoTd = montaTd(paciente.peso, "info-peso");
    var alturaTd = montaTd(paciente.altura, "info-altura");
    var gorduraTd = montaTd(paciente.gordura, "info-gordura");
    var imc = montaTd(paciente.imc, "info-imc");


    nomeTd.textContent = paciente.nome;
    pesoTd.textContent = paciente.peso;
    alturaTd.textContent = paciente.altura;
    gorduraTd.textContent = paciente.gordura;
    imcTd.textContent = paciente.imc;

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

    return pacienteTr;

}

function montaTd(dado, classe) {
    var td = document.createElement("td");
    td.textContent = dado;
    td.classList.add(classe);

return Td;
}
3 respostas
solução!

Marco,

Você informa que dados quer nessa chamada:

var nomeTd = montaTd(paciente.nome, "info-nome");

E ele vai aplicar aqui:

function montaTd(dado, classe) {
    var td = document.createElement("td");
    td.textContent = dado;
    td.classList.add(classe);

return Td;
}

O único problema é que você declarou uma variável "td" e fez return de uma variável "Td".

A maioria das linguagens é "case sensitive", ou seja, importa se alguma letra está maiúscula ou minúscula.

Tinham mais alguns erros de atribuição de variável e case sensitive mas consegui fazer funcionar, obrigado pela resposta.

Então o JS consegue entender os termos "dados" e "classe" dentro de uma função e "substitui" pelos "valores" apontados quando vamos chamar a função?

Parte da minha duvida era essa.

Isso, funciona como uma função matemática.

Você vai fazer uma substituição.

f(x , y) = x + y

Então, se passar x = 2 e y = 3:

f(2, 3) = 2 + 3

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