2
respostas

Quando clico em enviar não está acontecendo nada

Eu clico em enviar e não acontece nada o codigo está linkado no HTML corretamente não estou conseguindo identificar o erro

O erro no console aparece: criaVideo.js:7 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'value') at criaVideo (criaVideo.js:7:58) at HTMLFormElement. (criaVideo.js:17:49) criaVideo @ criaVideo.js:7 (anônimo) @ criaVideo.js:17

CriaVideo.js ↓ ↓ ↓

import { conectaApi } from "./conectaApi.js"

const formulario = document.querySelector("[data-formulario]")

async function criaVideo(evento) {
    evento.preventDefault()
    const imagem = document.querySelector("[data-image]").value
    const url = document.querySelector("[data-url]").value
    const titulo = document.querySelector("[data-titulo]").value
    const descricao = Math.floor(Math.random() * 10).toString()

    await conectaApi.criaVideo(titulo, descricao, url, imagem)

    window.location.href = "../pages/evio-concluido.html"
}

formulario.addEventListener("submit", evento => criaVideo(evento))

ConectaApi ↓ ↓ ↓

async function listaVideos(){
    const conexao = await fetch("http://localhost:3000/videos")
    const conexaoConvertida = await conexao.json()
    return conexaoConvertida;
}

async function criaVideo(titulo,descricao,url,imagem){
    const conexao = await fetch("http://localhost:3000/videos", {
        method: "POST",
        headers:{
            "Cotent-type": "application/json"
        },
        body: JSON.stringfy({
            titulo: titulo,
            descricao: `${descricao} mil vizualizações`,
            url: url,
            imagem:imagem
        })
    })

    const conexaoConvertida = await conexao.json()
    return conexaoConvertida
}
export const conectaApi = {
    listaVideos,
    criaVideo
}
2 respostas

Oi, Gildair

Está informando que:

  • "Cannot read properties of null (reading 'value') at criaVideo (criaVideo.js:7:58)"

  • Está tentando ler "value" de uma propriedade "null" na linha 7, posição 58, de "criaVideo.js"

  • "document.querySelector("[data-image]")" está retornando "null" (não existe)

Verifique se não seria "data-imagem"

const imagem = document.querySelector("[data-imagem]").value

Como o Luis disse acima quando voce chama o data-imagem está escrito errado, está data-image

Corrige e vê se mesmo assim vai dar erro

e acho que vai dar mais um erro ali quando voce chama o arquivo: window.location.href = "../pages/evio-concluido.html"

está escrito evio, e o arquivo se chama envio-concuido.html

Boa sorte.

Obs: essa aula foi bem complicada pra mim deu vários erros, deu até dor de cabeça rs ai entrei aqui pra ajudar quem teve os mesmos problemas que eu...