Entrar Ainda não tem acesso?
2
respostas

Failed to execute appendChild

Referente ao curso JS na Web: Armazenando dados no navegador, no capítulo Trabalhando com datas e atividade Exibindo a data

por Pedro Santos Pacheco de Oliveira
| 90.6k xp | 4 posts

Segue código abaixo:

import BotaoConclui from './componentes/concluiTarefa.js' import BotaoDeleta from './componentes/deletaTarefa.js'

const handleNovoItem= (evento) =>{

    evento.preventDefault()

    const lista = document.querySelector('[data-list]')
    const input = document.querySelector('[data-form-input]')
    const valor = input.value

    const calendario=document.querySelector('[data-form-date]')
    const data=moment(calendario.value)

    const dataFormatada=data.format('DD/MM/YYYY');

    const dados = {
        valor,
        dataFormatada
    }

    const criaTarefa = criarTarefa(dados)

    lista.appendChild(criaTarefa)
    input.value = " "
}

const criarTarefa = ({valor, dataFormatada}) => {

const tarefa = document.createElement('li')
tarefa.classList.add('task')
const conteudo = `<p class="content">${dataFormatada} * ${valor}</p>`

tarefa.innerHTML = conteudo

tarefa.appendChild(BotaoConclui())
tarefa.appendChild(BotaoDeleta())

}

const novaTarefa = document.querySelector('[data-form-button]')

novaTarefa.addEventListener('click', handleNovoItem)

Essa é a mensagem de erro que aparece: main.js:24 Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'. at HTMLButtonElement.handleNovoItem (main.js:24)

Não sei oq fiz de errado podem me ajudar?

2 respostas
por Mateus Henrique
| 996.6k xp | 1546 posts
Instrutor

Fala Pedro tudo bem? Espero que sim!

Verifica nas funções BotaoConclui e BotaoDeleta se você está retornando o botão!

Se não funcionar, poderia por favor enviar o código completo de BotaoConclui e BotaoDeleta?

Fico no aguardo

por Pedro Santos Pacheco de Oliveira
| 90.6k xp | 4 posts

Td blz cara, segue abaixo os códigos que você pediu: const BotaoConclui = () => { const botaoConclui = document.createElement('button') 

botaoConclui.classList.add('check-button')
botaoConclui.innerText = 'concluir'

botaoConclui.addEventListener('click', concluirTarefa)

return botaoConclui

}

const concluirTarefa = (evento) => { const botaoConclui = evento.target

const tarefaCompleta = botaoConclui.parentElement

tarefaCompleta.classList.toggle('done')

}

export default BotaoConclui

Deleta:

const BotaoDeleta = () => { const botaoDeleta = document.createElement('button')

botaoDeleta.innerText = 'deletar'
botaoDeleta.addEventListener('click', deletarTarefa)

return botaoDeleta

}

const deletarTarefa = (evento) => { const botaoDeleta = evento.target

const tarefaCompleta = botaoDeleta.parentElement

tarefaCompleta.remove()

return botaoDeleta

}

export default BotaoDeleta