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

Erro ao atribuir o valor do input junto do createElement

Estou com uma duvida, porque que quando vou atribuir os valores do input junto com a variavel que recebe a criação dos elementos acontece um erro.? exemplo:

var nomeTd = document.createElement('td').textContent = nome;
    var alturaTd = document.createElement('td').textContent = altura;
    var pesoTd = document.createElement('td').textContent = peso;
    var gorduraTd = document.createElement('td').textContent = gordura;

    tr.appendChild(nomeTd);
    tr.appendChild(pesoTd);
    tr.appendChild(alturaTd);
    tr.appendChild(gorduraTd);
    const addForm = document.querySelector("#tabela-pacientes");
    addForm.appendChild(tr);

//Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.

Agora quando faço a atribuição separadamente fechando com " ; " e jogando o textContent para linha de baixo , nao acontece esse mesmo erro.? exemplo:

    var nomeTd = document.createElement('td');
    nomeTd.textContent = nome;
    var alturaTd = document.createElement('td');
    alturaTd.textContent = altura;
    var pesoTd = document.createElement('td');
    pesoTd.textContent = peso;
    var gorduraTd = document.createElement('td');
    gorduraTd.textContent = gordura;

    tr.appendChild(nomeTd);
    tr.appendChild(pesoTd);
    tr.appendChild(alturaTd);
    tr.appendChild(gorduraTd);
2 respostas
solução!

Wesley, parece que os dois jeitos são iguais, mas na verdade cada um faz uma coisa bem diferente. Olha só:

var alturaTd = document.createElement('td').textContent = altura;

Repare que aqui tem dois iguais no mesmo "comando"? Você está atribuindo o valor altura à variável alturaTd, dizendo "a variável alturaTd recebe o valor do atributo textContent do elemento td criado pelo document, sendo que este (textContent) recebe o valor da variável altura.

Isso ocorre do mesmo modo que uma operação mais simples, mais fácil de visualizar:

a = 3;
c = b = a;

Qual o valor de c? É igual ao valor de b, que é igual ao valor de a. Entendeu?

Agora, se fizer do segundo modo, as duas operações são separadas:

var alturaTd = document.createElement('td');
alturaTd.textContent = altura;
  1. A variável alturaTd recebe o elemento td criado pelo document.
  2. O atributo textContent da variável alturaTd recebe o valor da variável altura.

Percebe qual a diferença?

Espero ter te ajudado a entender um pouco mais! Lembre-se de, caso a resposta tenha te ajudado, marcá-la como solução para que outros alunos que tenham uma dúvida semelhante possam reconhecer rapidamente!

Um abraço!

Retirando minha resposta pois a anterior já resolve o problema.

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