How to add event to each element generated dynamically in javascript only

Question

i am creating 'li' element dynamically through a loop and i m getting problem in assigning event to each element that is generated dynamically.I want to do assign event onclick on each li element that is generated.

Here is the code:

var not = [{
  "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 < not.length; i++) {
  lis[i] = document.createElement("li");
  var obj = document.createTextNode(not[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";
}

similarly there are 5 more not objects.

x.addEventListener("click", func()) should be x.addEventListener("click", func) — Andreas
– Andreas, Commented Jan 5, 2016 at 10:36
not is an object(json). var not = [{ "event" : "It's your friend's Birthday. Wish him luck!!!", "view" : "unread", "status" : "read", "image" : "<img src='cake.jpg' style='height:80px';'width:80px'>" }, — sarabjot singh
– sarabjot singh, Commented Jan 5, 2016 at 11:25
Please include the var not in the code block of you post to avoid confusion — Sherin Mathew
– Sherin Mathew, Commented Jan 5, 2016 at 11:31

Ivar · Accepted Answer · 2016-01-05 10:50:15Z

1

Try replacing

x.addEventListener("click", func());

by

x.addEventListener("click", func);

If you use func() you are calling the function and send the return value of func(), instead of passing the function itself.

edited Jan 5, 2016 at 10:50

Ivar

6,97912 gold badges58 silver badges69 bronze badges

answered Jan 5, 2016 at 10:42

Diego Grasso

213 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

sarabjot singh Over a year ago

Hi, thanks for replying actually i wanted to assign events to each of the element generated in a loop itself..is it possible? its not working on every element

Rajesh Dixit · Accepted Answer · 2016-01-05 11:44:26Z

0

Try using .bind, to bind value to event listener. When you do

x.addEventListener("click", func('ids[i])');

You are assigning return value of func to event listener.
'ids[i]' is not a variable. Its a string.

Replace following to:

x.addEventListener("click", func.bind(ids[i]));

answered Jan 5, 2016 at 11:44

Rajesh Dixit

25k5 gold badges52 silver badges86 bronze badges

Collectives™ on Stack Overflow

How to add event to each element generated dynamically in javascript only

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related