I'm currently generating 'li' elements dynamically using a loop and running into issues when it comes to assigning events to each generated element. My goal is to assign an onclick event to every li element that is created.
Check out the code snippet below:
var notifications = [{
"event": "It's your friend's Birthday. Wish him luck!!!",
"view": "unread",
"status": "read",
"image": "<img src='cake.jpg' style='height:80px;width:80px'>"
}]
var ids = ["id1", "id2", "id3", "id4", "id5"];
var lis = new Array(10);
var i = 0;
for (i; i < notifications.length; i++) {
lis[i] = document.createElement("li");
var obj = document.createTextNode(notifications[i].event);
lis[i].appendChild(obj);
document.body.appendChild(lis[i]);
lis[i].setAttribute('id', ids[i]);
var x = document.getElementById(ids[i]);
x.addEventListener("click", func('ids[i]'));
document.body.appendChild(ids[i]);
}
function func(a) {
document.getElementById(a).innerHTML = "hello";
}
There are also additional objects similar to the one above.