'Unable to add or delete documents even after getting the reference for a particular document

I'm getting a weird error while trying to work around with Firebase. This is the first time I'm using it(hence it's a basic CRUD query). While trying to add documents, I'm passing values via a form to add documents. And while deleting, I'm getting the ID as reference to delete the document. But neither of them are working. Would appreciate some help with this.

import {initializeApp} from 'firebase/app'
import {
getFirestore, collection, getDocs,
addDoc, deleteDoc, doc
} from 'firebase/firestore'

After importing the requisite functions, I try to add the documents into the database.

//adding a document through form values

const addRecipe= document.querySelector('.add');
addRecipe.addEventListener('submit', e=>{
    e.preventDefault()

    addDoc(colRef, {
        title : addRecipe.recipe.value,
        author : addRecipe.author.value,
    })
    .then(()=>{
        addRecipe.reset();
    })
})

Similarly, I try to delete a document after getting the reference,


    //deleting a document by fetching the ID

const deleteRecipe= document.querySelector('.delete')
deleteRecipe.addEventListener('submit', e=>{
    e.preventDefault()

    const docRef= doc(db,'recipes', deleteRecipe.id.value)

    deleteDoc(docRef)
    .then(()=>{
        deleteRecipe.reset();
    })
})

[NB:I am able the fetch the documents from Firebase that I manually created, but unable to add/delete through the code I provided above.]

Providing my HTML code snippet as well for reference,

<body>
    <div class="container my-5">
        <h1>Recipes</h1>
      

        <form class="add">
            <label for="recipe">Add a new recipe</label>
            <div class="input-group">
                <input type="text" class="form-control" name="recipe" required>
                
            </div>
            <label for="recipe">Add author</label>
            <div class="input-group">
                <input type="text" class="form-control" name="author" required>
            </div>
            <button>Add a recipe</button>
            
        </form>


        <form class="delete">
            <label for="recipe">Recipe ID</label>
            <div class="input-group">
                <input type="text" class="form-control" name="id" required>
                
            </div>
            <button>Delete a recipe</button>
            
        </form>



    </div>
   
    <script src="bundle.js"></script>
</body>

Not exactly sure what the error is here since I am passing values and referencing properly as is required.

Putting up my Firebase collection details as well which I added manually. enter image description here

javascripthtmlfirebasegoogle-cloud-firestore


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions