如何从点击事件中获取 id

Question

I use query snapshot.forEach created something like for loop that will loop through all of my data in firebase, and print them out with a div tag with a click event. When other users click on the div event, the event will grab the document in cloud firestore with the id of the div tag, now I am looking for how to get the id from that div tag that triggered the click event.

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());
        });
    })

Answer 1

I think that should answer your question, or at least what I understood from it

db.collection('posts')
  .get()
  .then ( querySnapshot =>
    {
    querySnapshot.forEach( doc =>
      {
      let postData = doc.data()
        , wrapper  = document.createElement('div')
        , content  = document.createElement('div')
        ;
      wrapper.className = 'wrapper'
      wrapper.id        = postData.title
      content.className = 'content'
      content.id        = postData.id
      content.innerHTML = `
        <h1 class="title">${postData.title}</h1>
        <p class="introduction">${postData.introduction}</p>`

      wrapper.appendChild(content)
      postCollection.appendChild(wrapper)

      content.onclick = event =>   // in case of way 1 you need to use Arrow function
        {
        profilePage.classList.add('hide')
        forumePage.classList.add('hide')
        postPage.classList.add('hide')
        postComment.classList.remove('hide')
        console.log(content.id)               // way 1
        console.log(event.currentTarget.id)   //  way 2
        }
      console.log( doc.id, " => ", doc.data())
      })
    })