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

[Bug] Script não é executado

Mesmo eu colocando a linha <script src="../js/criarVideo.js" type="module"></script> antes do fechamento do body em enviar-video.html, o script não é executado. Coloquei vários console.log e nenhum deles aparece :'(

conectaAPI.js

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

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

export const conectaAPI = {
    listaVideos,
    criaVideo
}

criarVideo.js

import { conectaAPI } from "./conectaAPI"

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

async function criarVideo(evento) {
    evento.preventDefault()

    const dadoTitulo = document.querySelector("[data-titulo]").value
    const dadodescricao = Math.floor(Math.random() * 10).toString()
    
    //recebe a url no formato que o youtube entrega e converte pro formato desejado
    let dadoUrl = document.querySelector("[data-url]").value
    dadoUrl = dadoUrl.replace('https://youtu.be/', 'https://www.youtube.com/embed/')
    
    // permite que o campo de imagem fique em branco, caso em que será colocada uma imagem padrão
    let dadoImagem = document.querySelector("[data-imagem]").value
    if (dadoImagem = "") {
        dadoImagem = "https://github.com/MonicaHillman/aluraplay-requisicoes/blob/main/img/logo.png?raw=true"
    }

    console.log(`url: ${dadoUrl}`)
    console.log(`titulo: ${dadoTitulo}`)
    console.log(`imagem: ${dadoImagem}`)

    const dadosVideo = {
        titulo: dadoTitulo,
        descricao: dadodescricao,
        url: dadoUrl,
        imagem: dadoImagem
    }

    await conectaAPI.criaVideo(dadosVideo)
    window.location.href = "../pages/envio-concluido.html"
}

formulario.addEventListener("submit", evento => criarVideo(evento))
2 respostas

Há um erro na sua lógica de comparação no arquivo "criarVideo.js". No seu "if" você está usando o operador de atribuição (=) ao invés dos operadores de comparação, como (=== ou ==) no seu if. Isso pode estar causando o comportamento inesperado no seu código. Vou deixar um exemplo de como está e como deveria estar:

###Como está:

if (dadoImagem = "") {
    dadoImagem = "https://github.com/MonicaHillman/aluraplay-requisicoes/blob/main/img/logo.png?raw=true"
}

###Como deveria estar:

if (dadoImagem === "") {
    dadoImagem = "https://github.com/MonicaHillman/aluraplay-requisicoes/blob/main/img/logo.png?raw=true"
}

Além disso, verifique se o caminho do arquivo criarVideo.js está correto e se ele pode ser acessado a partir da página enviar-video.html.

solução!

Obrigado João Paulo,

De fato havia um erro nessa linha, mas não era isso que estava impedindo a execução dos meus scripts era outro. Depois de uma noite de sono e uma consulta no Chat do Bing descobri que era um mínimo detalhe. A linha 1 de criaVideo.js deveria ser import { conectaAPI } from "./conectaAPI.js".

Usei apenas o autocompletar do vscode e ele não colocou a extensão do arquivo.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software