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

event.preventDefault() não está funcionando

Estou atualizando o código junto da professora, mas quando testo na pagina, apos clicar em "adicionar" a pagina recarrega e não há frase nova

import ui from "./ui.js"
import api from "./api.js"

document.addEventListener("DOMContentLoaded", () => {
    ui.renderizarPensamentos()

    const formularioPensamento = document.getElementById("pensamento-form")


    formularioPensamento.addEventListener("submit", manipularSubmissãoFormulario)
})

async function manipularSubmissãoFormulario(event) {
    event.preventDefault()
    const id = document.getElementById("pensamento-id").value
    const conteudo = document.getElementById("pensamento-conteudo").value
    const autoria = document.getElementById("pensamento-autoria").value

    try {
        await api.salvarPensamento({ conteudo, autoria })
        ui.renderizarPensamentos()
    }
    catch {
        alert("Erro ao salvar pensamento")
    }
}
7 respostas

Ana o seu código aparentemente está ok, se der pra compatilhar o projeto completo fica mais fácil de debuggar, se tiver no git, compartilha o link.

Mas uma observação que pode influênciar no código é a sua declaração da func com acento, isso não é recomendado.

Aqui está o link na pasta do drive, tirei a acentuação. No console também só aparece "Content Security Policy of yout site blocks the use of 'eval' in JavaScript" como um problema, mas não sei se tem a ver https://drive.google.com/drive/folders/1cb7aV3ZIi0nRa8wWJ4DJ2gac-LHsdmXO?usp=sharing

Boa tarde Ana, baixei seus arquivos e rodei o projeto aqui, vi alguns pontos para corrigir mas nada que atrapalhe o funcionamento. Vou te mostrar o passo a passo que realizei aqui.

  1. Eu tive que instalar aqui manualmente o json-server pois não tinha a dependencia no package.json, então para melhora o código darei a dica: pelo terminal acessa o local backed e nele execute o comando npm i --d json-server, pois quando alguém iniciar o projeto só precisará executar o comando npm i para instalar as dependências para o projeto funcionar.

  2. Depois disso eu tive que executar o plugins Live Server do vs code para resolver os problemas do CORS.

  3. No main.js fiz uma alteração de declaração, eu primeiro deixei a function manipularSubmissaoFormulario(event) ser declarada antes de adicionar o EventListener no document, lembresse que o JavaScript é uma linguagem interpretada, o que significa que o código é lido e executa linha a linha diretamente pelo interpretador do JavaScript, sem a necessidade de ser compilado previamente. Logo o mais correto é você declara a function antes de utilizar ela. Resumindo, coloque a function manipularSubmissaoFormulario(event) antes do document.addEventListener.

  4. E por último, no arquivo index.html na linha 34 o textarea esstá com um enter fazendo com que no formulário o campo já inicie com espaços setados no campo, basta você deixar tudo junto: <textarea id="pensamento-conteudo" placeholder="Digite seu pensamento" required></textarea>.

Veja se pra você, se esse passos vai resolver, caso não resolva a gente ver alguma outra solução.

continua com o mesmo problema, a pagina recarrega, tentei olhar se alguem tinha passador por algo semelhante no stack overflow, mas era por botar o e.default depois de um await na async function, mas não é esse o caso

solução!

Se quiser vamos ver seu caso juntos no Discord, caso queira, chama danilooliveira#1998 que a gente ver

Fui testas o codigo da propria aula e ta com o mesmo problema, e agora? Como proceder?

Oi Ana, verifiquei seu código e alguns ajustes precisam ser feitos, porém acredito que o problema de não estar aparecendo os pensamentos cadastrados pode estar relacionado ao backend e/ou à duplicação de funções.

Pelo que você descreveu, é possível que o backend (o json-server) não esteja sendo executado corretamente, o que faz com que a aplicação não consiga salvar os dados. Para inicializar a api, você pode navegar até a pasta backend com o comando cd backend e rodar o comando npm start. Isso irá inicializar a API e permitir que o frontend faça as requisições corretamente.

Outro ponto que pode estar interferindo no funcionamento é a duplicação da função manipularSubmissaoFormulario no seu código em main.js. Isso pode causar comportamentos inesperados ou confundir a lógica de submissão do formulário. Remova a segunda declaração da função para evitar problemas.

Também há um erro na linha onde você define o caminho da imagem, troque scr por src:

ui.js
iconeAspas.scr = "assets/imagens/aspas-azuis.png"

O correto seria:

ui.js
iconeAspas.src = "assets/imagens/aspas-azuis.png"

Esse erro não deve estar relacionado ao problema principal do pensamento não ser adicionado, mas é importante corrigir para evitar outros erros na renderização.

Verifique esses pontos, especialmente a inicialização do backend e a duplicação de funções. Caso o problema persista, veja se no console aparece algum erro, ele pode nos auxiliar a descobrir o problema.

Bons estudos!