Displaying data on the DOM

JavaScript
1

So I’m pulling emails from a database. I have so far managed to fetch them once to the mailbox using a for loop

  for (var i=0; i < emails.length; i++){
            var mailDiv = document.createElement("div") 
 mailDiv.innerHTML = `${emails[i].sender + "  " 
            + emails[i].subject + " " +  emails[i].timestamp }`;
}

I now want to click on each email and then log each emails data to the console.

[{
"id": 15, 
"sender": "example@example.com", 
"recipients": ["example@example.com"], 
"subject": "My Subject",
 "body": "my body"
}]

My problem now is how do I use document.addEventListener to target only 1 email and make it clickable to open it.

2

I am far from a specialist but,

mail.innerHTML is that mailDiv.innerHTML ? is mail to be found inside mailDiv ?
I would put each separate mail inside a separate div, give it an id (maybe equal to the mail id). Will you make a separate button for each mail? You could make it a child of that div, and then with event.target you could get to the parent and thus at the contents of the div. I think ‘event.target’ will be a great help.

But maybe this is not what you want ?

Greets,
Karin

3

yeah that was a typo(supposed to be mailDiv), corrected. I have got emails in the inbox already, my problem is the clicking bit. I tried to give each div same id as email but ids cannot start with a number and I have tried substr on the id but doesn’t seem to work. Is there any way around it?

4

id = “id_01”, id=" id_02", id = “id_03” … as id ?

Greets,
Karin

5