6
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")
    }
}
6 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

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?