如何将事件添加到每个动态生成的元素中，以及如何仅从JAVASCRIPT中的json访问数据

Question

This is my code in which I want to call clicksubmenu function onclick on each li element and each onclick I have to access different data from json.

Each li element is not calling the function and showing unexpected result :

Code:

var submenu1 = '{ "list" : [' + '{ "name":"Wish your friend on his 
timeline "  , "occasion": "Birthday!!", "status": "Viewed", "url": "www.notification1.com"
}, ' + ' {
  "name": "Wish your friend on his timeline",
  "occasion": "Birthday!!",
  "status": "Viewed",
  "url": "www.notification1.com"
}, ' + ' {
  "name": "Wish your friend on his timeline",
  "occasion": "Birthday!!",
  "status": "Viewed",
  "url": "www.notification1.com"
}, ' + ' {
  "name": "Wish your friend on his timeline",
  "occasion": "Anniversary!!",
  "status": "Viewed",
  "url": "www.notification2.com"
}, ' + ' {
  "name": "Wish your friend on his 
  timeline " , "
  occasion ":"
  Anniversary!!","
  status ":"
  Viewed ", 
  "url": "www.notification2.com"
}, ' + ' {
  "name": "Wish your friend on his  
  timeline " , "
  occasion ":"
  Anniversary!!","
  status ":"
  Viewed ", 
  "url": "www.notification2.com"
}, ' + ' {
  "name": "Wish your friend on his 
  timeline " , "
  occasion ":"
  Birthday!!","
  status ":"
  Viewed ", 
  "url": "www.notification3.com"
}, ' + ' {
  "name": "Wish your friend on his 
  timeline " , 
  "occasion": "Anniversary!!",
  "status": "Viewed",
  "url": "www.notification4.com"
}, ' + ' {
  "name": "Wish your friend on his timeline",
  "occasion": "Birthday!!",
  "status": "Viewed",
  "url": "www.notification5.com"
}
]
}
';
var obj = JSON.parse(submenu1);
var count = obj.list.length;

var li = new Array(10);
var liid = ['l1', 'l2', 'l3', 'l4', 'l5', 'l6', 'l7', 'l8', 'l9'];

function f() {


  var i = 0;
  document.getElementById('count').innerHTML = count;
  for (i = 0; i < count; i++) {
    li[i] = document.createElement("li");
    li[i].setAttribute('id', liid[i])
    li[i].className = "liclass";
    var t = document.createTextNode(obj.list[i].occasion +
      obj.list[i].name);
    li[i].appendChild(t);
    document.getElementById('ul').appendChild(li[i]);
    li[i].addEventListener('click', clicksubmenu(i));
  }

}

function visible(submenu) {
  if (document.getElementById(submenu).className == "divVisible") {
    document.getElementById(submenu).className = 'divHidden';
  } else {
    document.getElementById(submenu).className = 'divVisible';

  }
}

function clicksubmenu(a) {

  if (document.getElementById(liid[a]).style.backgroundColor == "lightblue") {
    alert(obj.list[a].url);
  } else {
    document.getElementById(liid[a]).style.backgroundColor = "lightblue";

    alert(obj.list[a].url);
    count--;
    document.getElementById('count').innerHTML = count;
    document.getElementById(liid[a]).innerHTML = obj.list[a].occasion + "    < br > " + obj.list[a].name + " < br > " + "
    Status: " + obj.list[a].status;
  }

  if (count == 0) {
    document.getElementById('count').style.visibility = "hidden";
  }
}

Answer 1

Neel, may be you have json structure issue. your json opbject structure should be like this: can you please change and check the code.

var submenu1 = { "list" : 
[{ "name":"Wish your friend on his timeline", "occasion":"Birthday!!", "status":"Viewed","url":"www.notification1.com"},
{ "name":"Wish your friend on his timeline" , "occasion":"Birthday!!", "status":"Viewed","url":"www.notification1.com"},
{ "name":"Wish your friend on his timeline" , "occasion":"Birthday!!", "status":"Viewed","url":"www.notification1.com"},
{ "name":"Wish your friend on his timeline" , "occasion":"Anniversary!!", "status":"Viewed", "url":"www.notification2.com" },
{ "name":"Wish your friend on his timeline" , "occasion":"Anniversary!!", "status": "Viewed", "url":"www.notification2.com" },
{ "name":"Wish your friend on his timeline" , "occasion":"Anniversary!!", "status":"Viewed", "url":"www.notification2.com" },
{ "name":"Wish your friend on his timeline" , "occasion":"Anniversary!!", "status": "Viewed", "url":"www.notification2.com" }
]};