Entrar Ainda não tem acesso?
2
respostas

Meu botão de concluir tarefa não aparece

Referente ao curso JavaScript na Web: manipule o DOM com JavaScript, no capítulo Concluir tarefa e atividade Criando botão concluir

por Pedro Augusto
| 34.4k xp | 30 posts

E aí, pessoal

Então, não entendi op que estou fazendo de errado, fiz o que o professor fez (pelo menos eu acho) e meu botão de concluir tarefa não aparece na li.

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')
    lista.appendChild(tarefa)

    const conteudo = `<p class="content">${valor}</p>`

    tarefa.appendChild(concluirTarefa())

    tarefa.innerHTML = conteudo
    input.value = " ";

}

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


const concluirTarefa = () =>{
    const botaoConcluir = document.createElement('button')

botaoConcluir.addEventListener('click', () =>{
    console.log('fui clicado')
})

return botaoConcluir
}
2 respostas
por Leandro Nardi Nascimento
| 209k xp | 23 posts

Ola Pedro , tudo bem ? Acredidito que problema seja falta de algumas informações que complementam o codigo :

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())  // anexar o botao dentro da li e executa ele
    tarefa.appendChild(tarefa())  //corrigir para tarefa
    input.value = " ";

}

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

novaTarefa.addEventListener('click', criarTarefa)


const BotaoConclui = () =>{ // corrigi pra BotaoConclui
    const botaoConclui = document.createElement('button')

    botaoConclui.classList.add("check-button") // adciona uma class ao botao

    botaoConclui.innerText = "concluir" // para colocar um  texto dentro do elemento 

    botaoConclui.addEventListener('click', () =>{
        console.log('fui clicado')
})

return botaoConclui  // corrige para botaoConclui
}

Espero ter ajudado , boa sorte e bons estudos .

por Pedro Augusto
| 34.4k xp | 30 posts

Então, eu só troquei o nome das coisas (concluirTarefa para BotaoConclui) e funcionou, por que isso aconteceu?