how to add onclick event to create new element in javascript

Question

I have created a label element. I need to add onclick event to that...

function a(me) {
    var d=document.createElement("label");
    d.id=me.id;
    d.onClick="a(10)";
    d.innerHTML="welcome";
    document.body.appendChild(d);
}

HTML:

<label id="1" onclick="a(this)">aa</label>
<label id="2" onclick="a(this)">bb</label>
<label id="3" onclick="a(this)">aa</label>

actually what happens is when i click the any of three labels in html. another label is created and displays welcome. now when i click the newly created label "welcome" it does not display anything...... that is the onclick event added to newly created label is not working ....... any suggestion.................

You're using the same ID on two elements. Only use an ID once. — McKayla
– McKayla, Commented May 27, 2011 at 18:24
There are two labels with the ID 1. BTW, you should not use IDs starting with a number. — kapa
– kapa, Commented May 27, 2011 at 18:36
You create a new label with the same id as the one clicked. (d.id=me.id;) And as bazmegakapa mention, ID's should always start with a letter. — McKayla
– McKayla, Commented May 27, 2011 at 18:44

maerics · Accepted Answer · 2011-05-27 18:51:24Z

18

You need to set d.onclick=function(){a(1);};, note that the case matters here (not "onClick").

[Edit]

Based on your comments and updated questions I've created a jsFiddle to demonstrate how you might turn your code into something that works.

edited May 27, 2011 at 18:51

answered May 27, 2011 at 18:18

maerics

157k47 gold badges277 silver badges299 bronze badges

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

6 Comments

thuk Over a year ago

still when i click that label after adding this property. it is not calling the function.........

thuk Over a year ago

@maerics. the onclick event is still not working. what may be the problem...??

maerics Over a year ago

@thuk: please edit your question with details about what you are trying to accomplish and what specifically happens when you run your existing code, this way others can easily see the problem. Just a guess, the argument "me" to the function looks suspicious because it will duplicate ids, which should be unique...

kapa Over a year ago

@thuk You can easily create a jsFiddle on jsfiddle.net to illustrate your problem even better.

thuk Over a year ago

@maerics finally ur code worked for me. very thanks. i have done a silly spelling mistake.... thanks ......

|

Senad Meškin · Accepted Answer · 2011-05-27 18:18:35Z

6

d.setAttribute('onclick', 'alert(\'hello\');');

answered May 27, 2011 at 18:18

Senad Meškin

13.8k4 gold badges39 silver badges55 bronze badges

Comments

Juan David Castro · Accepted Answer · 2016-12-08 23:33:12Z

0

For creating an attribute to a HTML tag, sometimes we have to add this:

yourTag.src
yourTag.src = 'http://lolxd.com/404.png'

But there are special attributes, and them have diferents ways for editing:

yourTag.classList
yourTag.className

And there is the onclick attribute, wichwe can use it like this:

// The first way
obj.onclick = function () { alert('lalala') }
// With the Event Listener
obj.addEventListener('click', function () { alert('lalala') }, false)
// Or, a text-render way
obj.setAttribute('onclick', 'alert(`lalala`)')

I recomend you the Event Listener way, but try all :D

answered Dec 8, 2016 at 23:33

Juan David Castro

12 bronze badges

Collectives™ on Stack Overflow

how to add onclick event to create new element in javascript

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related