In my code, I have a query called snapshot.forEach that functions similarly to a for loop in looping through all of my Firebase data and displaying it with a div tag containing a click event. When another user clicks on this div tag, the event will retrieve the document in Cloud Firestore with the corresponding id. However, I am currently seeking a method to extract this id from the triggering div tag.
db.collection("posts")
.get()
.then((querySnapshot) => {
querySnapshot.forEach((doc) => {
postData = doc.data()
var wrapper = document.createElement('div')
wrapper.classList.add('wrapper')
wrapper.setAttribute('id',postData.title);
var content = document.createElement('div')
content.classList.add('content')
content.setAttribute('id',postData.id);
var title = document.createElement('h1')
title.classList.add('title')
var introduction = document.createElement('p')
introduction.classList.add('introduction')
title.innerHTML = postData.title
introduction.innerHTML = postData.introduction
postCollection.appendChild(wrapper)
wrapper.appendChild(content)
content.appendChild(title)
content.appendChild(introduction)
content.onclick=function(event){
profilePage.classList.add('hide')
forumePage.classList.add('hide')
postPage.classList.add('hide')
postComment.classList.remove('hide')
}
console.log(doc.id, " => ", doc.data());
});
})