1
resposta

Uncaught TypeError: Cannot read properties of null (reading 'appendChild')

Problemas na validação do paciente: Quando digito um paciente válido no form ele adiciona, tudo certo. Mas quando digito um paciente inválido, apesar de não o adicionar na tabela e exibir as mensagens de erro no console, ele não exibe as mensagens de erro na ul. Ele exibe o seguinte erro no console:

form.js:33 Uncaught TypeError: Cannot read properties of null (reading 'appendChild')
    at form.js:33:8
    at Array.forEach (<anonymous>)
    at exibeMensagensDeErro (form.js:30:10)
    at HTMLButtonElement.<anonymous> (form.js:16:5)

As partes do meu código relacionadas à validação estão digitas conforme o professor digitou, não consigo encontrar o erro:

var erros = validaPaciente(paciente);                                         // variável de erro na validação do paciente

            if(erros.length > 0){                                                        // se os tds de altura ou de peso do paciente forem inválidas,
                console.log(erros);
                exibeMensagensDeErro(erros);                                            // exiba as mensagens de erro necessárias
                return;                                                                    // não adicione o paciente na tabela
            }

Também essa:

        function exibeMensagensDeErro(erros) {                                            // função que exiba as mensagens de erro necessárias e põe no HTML com li na ul
            var ul = document.querySelector("mensagens-erro");                            // variável que traz do HTML a ul das mensagem de erro
            erros.forEach(function(erro) {                                                // para cada item do array de erro,
                var li = document.createElement("li");                                    // crie um novo li
                li.textContent = erro;                                                    // exiba a mensagem de erro
                ul.appendChild(li);                                                        // atribui o novo li à ul no HTML
            });
    }

E essa:

function validaPaciente(paciente){                                    // função que valida os tds de altura e peso do paciente

        var erros = [];                                                    // cria uma variável que contém as mensagens de erro

        if(!validaPeso(paciente.peso)){                                    // se o peso do paciente for inválido,
            erros.push("O peso é inválido");                            // adicione à variável de erros e exiba:
        }

        if(!validaAltura(paciente.altura)){                                // se a altura do paciente for inválida,
            erros.push("A altura é inválida");                            // adicione à variável de erros e exiba:
        }

        return erros;                                                    // exiba os erros caso haja necessidade
    }
1 resposta

Seu problema é bem parecido com o que eu tava batendo cabeça até agora hahahaha, vou tentar te ajudar. O seu var ul = document.querySelector está selecionando ("mensagens-erro") e isso não sinaliza uma classe/id HTML.

        function exibeMensagensDeErro(erros) {                                            // função que exiba as mensagens de erro necessárias e põe no HTML com li na ul
            var ul = document.querySelector("mensagens-erro");                            // variável que traz do HTML a ul das mensagem de erro
            erros.forEach(function(erro) {                                                // para cada item do array de erro,
                var li = document.createElement("li");                                    // crie um novo li
                li.textContent = erro;                                                    // exiba a mensagem de erro
                ul.appendChild(li);                                                        // atribui o novo li à ul no HTML
            });
    }

Caso seu UL possua ID, como no video do professor, você deve trocar para

            var ul = document.querySelector("#mensagens-erro"); 

No meu caso, era uma classe, e fiquei tentando corrigir o meu código com o do professor e não dava certo, mas o erro era o mesmo.

Espero ter ajudado.

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