Boa tarde. Quando leio o programa, aparece o seguinte erro, antes mesmo de inserir um novo cliente:
Uncaught (in promise) TypeError: Cannot read property 'appendChild' of null at cliente-service.js:55 at Array.forEach () at cliente-service.js:54 (anonymous) @ cliente-service.js:55 (anonymous) @ cliente-service.js:54 Promise.then (async) (anonymous) @ cliente-service.js:49
Segue meu código (não dividi em vários arquivos, deixei tudo no mesmo arquivo):
// <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< CRIA NOVA LINHA >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
const criaNovaLinha = (nome, email) => {
const linhaNovoCliente = document.createElement('tr')
// Uma Template Literal precisa estar entre crases.
const conteudo = `
<td class="td" data-td>${nome}</td>
<td>${email}</td>
<td>
<ul class="tabela__botoes-controle">
<li><a href="../telas/edita_cliente.html" class="botao-simples botao-simples--editar">Editar</a></li>
<li><button class="botao-simples botao-simples--excluir" type="button">Excluir</button></li>
</ul>
</td>
`
linhaNovoCliente.innerHTML = conteudo
return linhaNovoCliente
}
//<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< LISTA CLIENTES >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
const listaClientes = () => {
return fetch(`http://localhost:3000/profile`)
.then(resposta => {
return resposta.json()
})
}
// <tbody data-tabela>
const tabela = document.querySelector('[data-tabela]')
listaClientes()
.then(data => {
data.forEach((elemento) => {
tabela.appendChild(criaNovaLinha(elemento.nome, elemento.email))
})
})
// <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< CRIA CLIENTE >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
const criaCliente = (nome, email) => {
return fetch(`http://localhost:3000/profile`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
nome: nome,
email: email,
})
})
.then(resposta => {
return resposta.body;
})
}
// <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< CADASTRA CLIENTE >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
// <form class="flex flex--coluna" data-form> em cadastra_cliente.html
const formulario = document.querySelector('[data-form]')
formulario.addEventListener('submit', function(evento) {
evento.preventDefault();
const nome = evento.target.querySelector('[data-nome]').value
const email = evento.target.querySelector('[data-email]').value
criaCliente(nome,email)
.then(function() {
window.location.href = '../telas/cadastro_concluido.html'
})
})
