Entrar Ainda não tem acesso?
1
resposta

[Dúvida] Não aparece nada quando clico na "Lista de tarefas" no meu projeto

Referente ao curso JavaScript: explorando a manipulação de elementos e da localStorage, no capítulo Exibindo as tarefas no DOM e atividade Escondendo o formulário

por Yago Souza
| 64.2k xp | 20 posts
Analista de T.I

Quando clico pra abrir lista de tarefas ou adicionar nova lista de tarefas não aparece nada, mas antes esta funcionando perfeitamente, parou de funcionar quando terminei de assistir a aula "02. Exibindo as tarefas no DOM"

meu "script-crud.js": 

const btnAdicionarTarefa = document.querySelector('.app__button--add-task')
const formAdicionarTarefa = document.querySelector('.app__form-add-task')
const textArea = document.querySelector('.app__form-textarea')
const ulTarefas = document.querySelector('.app__section-task-list')

const tarefas = JSON.parse (localStorage.getItem('tarefas')) || [];

function criarElementoTarefa(tarefa) {
    const li = document.createElement('li')
    li.classList.add('app__section-task-list-item')

    const svg = document.createElement('svg')
    svg.innerHTML = `
        <svg class="app__section-task-icon-status" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <circle cx="12" cy="12" r="12" fill="#FFF"></circle>
            <path d="M9 16.1719L19.5938 5.57812L21 6.98438L9 18.9844L3.42188 13.4062L4.82812 12L9 16.1719Z" fill="#01080E"></path>
        </svg>
    `
    const paragrafo = document.createElement('p')
    paragrafo.textContent = tarefa.descricao
    paragrafo.classList.add('app__section-task-list-item-description')

    const botao = document.createElement('button')
    botao.classList.add('app_button-edit')

    const imagemBotao = document.createElement('img')
    imagemBotao.setAttribute('src', '/imagens/edit.png')
    botao.append(imagemBotao)

    li.append(svg)
    li.append(paragrafo)
    li.append(botao)

    return li
}

btnAdicionarTarefa.addEventListener('click', () => {
    formAdicionarTarefa.classList.toggle('hidden')
})

formAdicionarTarefa.addEventListener('submit', (evento) => {
    evento.preventDefault();
    const tarefa = {
        descricao: textarea.value
    }
    tarefas.push(tarefa)
    const elementoTarefa = criarElementoTarefa(tarefa)
    ulTarefas.append(elementoTarefa)
    localStorage.setItem('tarefas', JSON.stringify(tarefas))
    textArea.value = ''
    formAdicionarTarefa.classList.add('hidden')
})

tarefas.forEach(tarefa => {
   const elementoTarefa = criarElementoTarefa(tarefa)
   ulTarefas.append(elementoTarefa)
});
1 resposta
por Mike de Sousa
| 3543.8k xp | 7128 posts
Alura Scuba Team Analista de Suporte Educacional

Olá, Yago, como vai?

Existe um ponto no seu código que impede o funcionamento do formulário. No início do script você declarou a constante com o nome textArea, utilizando A maiúsculo:

const textArea = document.querySelector('.app__form-textarea')

No entanto, dentro do submit você está acessando textarea.value, com a minúsculo:

const tarefa = {
descricao: textarea.value
}

Como JavaScript é case sensitive, textArea e textarea são variáveis diferentes. Nesse caso, textarea não existe, o que gera um erro no momento do submit e interrompe a execução do restante do script. Quando ocorre esse erro, os próximos trechos deixam de funcionar, inclusive a exibição das tarefas.

Ajuste o trecho para utilizar exatamente o mesmo nome da variável declarada:

const tarefa = {
descricao: textArea.value
}

Esse tipo de detalhe é comum quando começamos a manipular DOM e eventos. Sempre que algo “para de funcionar”, vale abrir o DevTools do navegador, ir na aba Console e verificar se há algum erro em vermelho, como por exemplo “textarea is not defined”.

Depois de corrigir isso, a funcionalidade de adicionar e exibir tarefas deve voltar a operar normalmente.

Se continuar com alguma dificuldade, compartilhe o erro exibido no console que analisamos juntos. O fórum segue à disposição.

Abraços :)

Caso este post tenha lhe ajudado, por favor, marcar como solucionado

Tópicos relacionados

Mostrar mais tópicos Mostrar menos tópicos

Conteúdos Alura com o tema

Trilhas por carreira

Carreiras de IA

Carreiras de Dados

Carreiras de Cyber

Carreiras de DevOps & Cloud

Carreiras de UX & UI

Carreiras de Mobile & Front-End

Carreiras de Back-End

Carreiras de Negócios

Cursos universitários FIAP

Graduação | Pós-graduação | MBA