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

O "concluir tarefa" não está funcionando

O erro é que ele não executa o comando de tarefa concluída, que seria para "riscar" a tarefa

( () => {
const criarTarefa = (evento) =>{
evento.preventDefault()
  const lista = document.querySelector ('[data-list]')
  const input = document.querySelector('[data-form-input]')
  const valor = input.value
  const tarefa = document.createElement('li')
  tarefa.classList.add('task')
  const conteudo = `<p class ="content">${valor}</p>`
   tarefa.innerHTML = conteudo
   tarefa.appendChild(BotaoConclui())
   lista.appendChild(tarefa)
    input.value = ""
}

const novaTarefa = document.querySelector('[data-form-button]')
novaTarefa.addEventListener('click',criarTarefa)

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')
  }
})()
3 respostas
solução!

Fala Agnaldo, tudo bem? Espero que sim!

O problema é que, função concluirTarefa você utiliza classlist, sendo que o correto seria classList em camel case!

Assim ficando o código:

const concluirTarefa = (evento)=> {
    const botaoConclui = evento.target
    const tarefaCompleta = botaoConclui.parentElement
    tarefaCompleta.classList.toggle('done')
  }

Antes, sem essa modificação o JavaScript não adicionava a classe done ao elemento, assim não aplicando a estilização correta.

Espero ter ajudado, abraços bons estudos :D

Mateus, muitissimo obrigado. Deu certo aqui :)

Denada! Qualquer coisa só chamar a gente aqui no fórum, ta bom?

Abraços e bons estudos :D