1
resposta

Problemas com target e parentElement

Na conclusão da tarefa, ocorrem erros tanto no target quando no parentElement, assim, a tarefa não é marcada como concluida. Não consegui encontrar solução...

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

const criarTarefa = (evento) => {
    //previse o refresh padrão do formulário
    evento.preventDefault()

    //busca input e captura o valor
    const formInput = document.querySelector('[data-form-input]')
    const valorInput = formInput.value

    //busca lista
    const listaTarefa = document.querySelector('[data-list]')

    //cria um novo li, adiciona uma classe, um conteúdo 
    const novoLi = document.createElement('li')
    novoLi.classList.add('task')
    const conteudoLi = `<p>${valorInput}</p>`  
    novoLi.innerHTML = conteudoLi

    //adicionando o botão criado(função()) à li
    novoLi.append(botaoConclui())

    //anexando o novo Li à lista(ul)
    listaTarefa.appendChild(novoLi)

    //limpa input
    formInput.value = ''
}

//criar tarefa
formButton.addEventListener('click', criarTarefa)

//criando o botão concluir 
const botaoConclui = () => {

    const btnConclui = document.createElement('button')
    btnConclui.classList.add('check-button')  //incluindo classe
    btnConclui.innerHTML = "Concluir"   //adicionando texto ao botão

    btnConclui.addEventListener('click', concluirTarefa)

    return btnConclui
}

//concluindo a tarefa
const concluirTarefa = (evento) => {
    const btnConclui = evento.target

    const tarefaCompleta = btnConclui.parentElement //pegando o pai do elemento (li)

    tarefaCompleta.classList.toggle('done')
}
1 resposta

Fala ai Pedro, tudo bem? Olhando os códigos é bem complicado achar o problema, posso deixar passar algum detalhe facilmente, sendo assim, posso te pedir um favor? Compartilha o projeto completo assim eu consigo simular o problema por aqui e analisá-lo com mais calma.

Pode compartilhar através do Github ou Google Drive (zipado).

Fico no aguardo.