How do I create objects dynamically with Onclick property in javascript

Question

I have the following code

  var eventbar = document.createElement("Div");
  eventbar.id = "eventa";
  eventbar.className= "event";
  eventbar.onclick = 'createpopupdata(this)';
  eventbar.innerHTML = "Click here";
  document.getElementById("body").appendChild(eventbar);

However when it creates the object inside the HTML my inspector shows no onClick property in the HTML Div that is created. Wondering were I'm going wrong as I have tried multiple ways posted here. (Obviously sans the quotes runs the function immediately).

Edit: I'm wonedering if I have to do something special like create a listener for the object or if there is an easy solution.

You can replace eventbar.onclick = 'createpopupdata(this)'; with eventbar.setAttribute('onclick', 'createpopupdata(this)'); — enhzflep
– enhzflep, Commented Jan 31, 2016 at 12:19
I think this is exactly what I was looking for as it will allow me to send multiple parameters(I hope). — Kevrone
– Kevrone, Commented Jan 31, 2016 at 12:20
It's also the way that leaves you with HTML that resembles (i.e is identical to) the HTML you'd get if you typed it out by hand and used an inline js handler, as you're doing. ;) — enhzflep
– enhzflep, Commented Jan 31, 2016 at 12:22

Rajesh Dixit · Accepted Answer · 2016-01-31 12:13:28Z

2

You can try something like this:

var eventbar = document.createElement("Div");
eventbar.id = "eventa";
eventbar.className = "event";
eventbar.onclick = createpopupdata.bind(null,eventbar);
eventbar.innerHTML = "Click here";
document.getElementById("body").appendChild(eventbar);

function createpopupdata(el){
  alert(el.id)
}

div{
  width:50px;
  height:50px;
  background:#eee;
}

<div id="body"></div>

answered Jan 31, 2016 at 12:13

Rajesh Dixit

25k5 gold badges52 silver badges86 bronze badges

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

1 Comment

Rajesh Dixit Over a year ago

I'm sorry but didn't get why the bind vs what was displayed below. Can you explain?

Gavriel · Accepted Answer · 2016-01-31 12:21:57Z

1

Your onclick (not onClick it's case-sensitive!) should be the reference to the function (createpopupdata) , not the call to it ('createpopupdata(this)'). First add it to the DOM, then the onclick listener.

function createpopupdata(event) {
  var el = event.target;
  alert(el.id + " clicked, foo: " + el.dataset.foo + ", bar: " + el.dataset.bar);
}
var eventbar = document.createElement("Div");
eventbar.id = "eventa";
eventbar.dataset.foo = "FOO";
eventbar.dataset.bar = "BAR";
eventbar.className= "event";
eventbar.innerHTML = "Click here";
document.getElementsByTagName("body")[0].appendChild(eventbar); 
eventbar.onclick = createpopupdata;

You also have to have <body id="body"> in order to make your version work. I modified it to work in the usual case.

edited Jan 31, 2016 at 12:21

answered Jan 31, 2016 at 12:06

Gavriel

19.3k13 gold badges73 silver badges116 bronze badges

4 Comments

Kevrone Over a year ago

Does not seem to work. (Also of course I have the body id=body tag)

Kevrone Over a year ago

Ok so this is working but how would one pass in multiple parameters with this method?

Gavriel Over a year ago

@Kevrone, see foo, bar added

Kevrone Over a year ago

Awesome. I actually used a combination of the dataset you mentioned as well as the setattribute mentioned by @enhzflep

Daniel · Accepted Answer · 2016-01-31 12:03:18Z

0

This should work:

eventbar.addEventListener('click', function (){
    createpopupdate(this);
}, false);

edited Jan 31, 2016 at 12:03

answered Jan 31, 2016 at 12:02

Daniel

268 bronze badges

2 Comments

Kevrone Over a year ago

Still no love with this one.

SnareChops Over a year ago

Please explain how this code solves the OP's question. This will help the OP understand your code and apply it to theirs, as well as help future searchers.

Collectives™ on Stack Overflow

How do I create objects dynamically with Onclick property in javascript

3 Answers 3

1 Comment

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related