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

Atribuindo text content a tr

Pessoal, tudo bem? Qual a diferença de eu fazer isso:

// Atribuindo valor às novas tds
nomeTd = nome.textContent
pesoTd = peso.textContent
gorduraTd = gordura.textContent

Pra isso?

// Atribuindo valor às novas tds
    nomeTd.textContent = nome;
    pesoTd.textContent = peso;
    alturaTd.textContent = altura;
    gorduraTd.textContent = gordura;

Restante do código:

// Adicionando novo paciente

var botao = document.querySelector("#adicionar-paciente");

botao.addEventListener("click", function (event) {

    event.preventDefault(); // Limpando configurações padrão do botão;

    // Guardando valores dos campos do formAddPaciente dentro de consts
    let formAddPaciente = document.querySelector("#form-add-paciente");
    let nome = formAddPaciente.nome.value;
    let peso = formAddPaciente.peso.value;
    let altura = formAddPaciente.altura.value;
    let gordura = formAddPaciente.gordura.value;

    // Criando novos elementos para inserir linha na tabela
    let pacienteTr = document.createElement("tr");
    let nomeTd = document.createElement("td");
    let pesoTd = document.createElement("td");
    let alturaTd = document.createElement("td");
    let gorduraTd = document.createElement("td");

    // Atribuindo valor às novas tds
    nomeTd.textContent = nome;
    pesoTd.textContent = peso;
    alturaTd.textContent = altura;
    gorduraTd.textContent = gordura;

    //Estruturando hierarquia na linha da tabela;
    let tabelaPacientes = document.querySelector("#tabela-pacientes");
    tabelaPacientes.appendChild(pacienteTr);
    pacienteTr.appendChild(nomeTd);
    pacienteTr.appendChild(pesoTd);
    pacienteTr.appendChild(alturaTd);
    pacienteTr.appendChild(gorduraTd);

});
2 respostas
solução!

Olá Leonardo, tudo bem com você?

Para ficar um pouco mais fácil eu vou colocar um console.log no código, aqui:

console.log(nomeTd)

O que teremos de resultado é uma ► <td>, se clicarmos na seta, teremos todas as propriedades que um <td> tem, por exemplo:

  • abbr
  • bgColor
  • hidden
  • innerHTML
  • innerText
  • onclick
  • textContent
  • width

Entre outras dezenas de atributos, entre eles temos o nosso textContent que é o conteúdo que ficara dentro da tag

Então quando fazemos:

    nomeTd.textContent = nome;

Estamos falando: " Pegue essa <td> e de varias propriedades vá na textContent e altere o valor para o conteúdo da minha variável nome

Já o seu segundo exemplo:

nomeTd = nome.textContent

Temos algumas questões, a primeira é que textContent é um atributo das tags do html, a nossa variável nome é apenas uma String que não tem esse atributo :)

Então vamos tirar esse .textContent e deixar apenas:

nomeTd = nome

E dessa forma teremos outro comportamento, que é substituir toda a tag por apenas uma String com o valor do campo nome, que não é o nosso resultado desejado :)

Por isso utilizamos a notação ponto para acessar atributos das tags e alterar só aquela parte, e não ela totalmente :)

Conseguiu compreender? Qualquer coisa estou a disposição :)

Abraços e Bons Estudos!

Entendido, obrigado!