1
resposta

O BOTÃO NÃO APARECE

//FUNTIONN
const  CriarBoato = () => {
    const botton = document.createElement('button')

    botton.classList.add("check-button")
    botton.innerText= "Concluir"
    botton.addEventListener('click',() => {
        console.log('fui clicado')
    })

    return(botton)
}

const CriarTarefa = (evento) => {
    evento.preventDefault(); // para nao  reniciar o saite  fomulario 

    //

    const input = document.querySelector('[data-form-input]')
    const valor = input.value
    const lista = document.querySelector('[data-list]')
    const counteudo = `<p class="content"> ${ valor }</p>`
    const tarefa = window.document.createElement('li')
    //


    tarefa.classList.add('task')
    lista.appendChild(tarefa)
    tarefa.appendChild(CriarBoato())
    tarefa.innerHTML= counteudo

    //
    console.log(valor)
}

//variaves 
const novaTarefa = document.querySelector('[ data-form-buttion]')


//

novaTarefa.addEventListener('click', CriarTarefa)
1 resposta

Oi Gabriel!

Vamos analisar o que está acontecendo com o seu código na criação da tarefa

   // CriaTarefa
    // ...
    tarefa.appendChild(CriarBoato())
    tarefa.innerHTML= counteudo

    //...

O botão é colocado dentro de tarefa, porém logo depois o innerHTML de tarefa é substituido por conteudo. Ou seja, o código do botão que estava dentro de tarefa foi apagado e substituido por conteúdo.

Agora, se invertermos as instruções

   // CriaTarefa
    // ...
    tarefa.innerHTML= counteudo
    tarefa.appendChild(CriarBoato())

    //...

O innerHTML de tarefa receberá conteudo e depois o botão será adicionado.

Espero ter ajudado! Qualquer outra dúvida pode postar aqui! :)