Problemas na Semana-FrontEnd ||Aula2

#JavaScript

<p> Boa noite, realizando juntamente com a reprise da aula me deparei com alguns erros de como não salvar no firebase os dados acrescentados no formulário e também no navegador consta erro na linha 29 / 30 do arquivo main.js, no que supostamente a semântica parece estar correta.</p>

***Fico Agradecido se alguém puder ajudar Muito Obrigado :)***

GitHub com o projeto => https://github.com/Davy-Fonini-M/Landing-Page-Stranger-things/blob/main/Projeto-Semana-FrontEnd/assets/javascript/main.js

Compartilhe

Recomendados para você

Potência Tech iFood - Desenvolvimento de Jogos

Comentários (2)

Vitor Emidio - 28/08/2022 01:03

Eu clonei o seu projeto aqui e fiz alguns testes, encontrei uns problemas e soluções.

1) index.html

A importação do arquivo main.js precisa ser:

<script type="module" src="assets/javascript/main.js"></script>

Na sua importação tem uma "/" antes do "assets"

2) main.js

O seletor do botão estava com o nome errado. Troquei para "btnSubscribe" como tá no html.

No final, o código ficou assim:

import app from "./firebase/app.js"
import{getHellFireClubSubscriptions, subscribeToHellfireClub} from './firebase/hellfire-club.js'


const txtName= document.getElementById('txtName')
const txtEmail= document.getElementById('txtEmail')
const txtLevel= document.getElementById('txtLevel')
const txtCharacter= document.getElementById('txtCharacter')


const btnSubscribe= document.getElementById('btnSubscribe') // correcao do id "btnSubscribe"


btnSubscribe.addEventListener('click', async () =>{
  const subscription = {
      name: txtName.value,
      email: txtEmail.value,
      level:txtLevel.value,
      character:txtCharacter.value
  }
   
  const subscrptionId = await subscribeToHellfireClub(subscription)
  console.log('Inscrito com sucesso: $(subscriptionId)')


  txtName.value = ''
  txtEmail.value = ''
  txtLevel.value = ''
  txtCharacter = ''
})

O problema que está tendo na linha 29/30 é porque a função "loadData" tem um "await". E só podemos usar o "await" em função assíncronas/Promise. Para fazer isso basta adicionar um "async" antes do nome da sua função

async function loadData(){ // faltou o async
  const subscriptions = await getHellFireClubSubscriptions() 
  
  subscriptionList.InnerHTML= subscriptions.map(sub => '<li>  ${sub.name} </li>').join('')
    
  console.log(subscriptions)
}

3) hellfire-club.js

Faltou informar o nome do service que queria importar

Faltou chamar a função "collection"

No final, com as alterações que fiz, ficou assim:

import app from'./app.js'
import { addDoc, collection, getFirestore, getdocs } from 'https://www.gstatic.com/firebasejs/9.9.3/firebase-firestore.js' // faltou informar "firestore"



export async function subscribeToHellfireClub(subscription){
  debugger
  const db = getFirestore(app)
  const hellfireClubCollection = collection(db, 'hellfire-club') // Faltou chamar a funcao
  const docRef= await addDoc(hellfireClubCollection, subscription)
  return docRef.id
}