Javascript - Add button with onClick attribute dynamically

Question

I am using this code, which adds button:

document.getElementById("items").innerHTML=document.getElementById("items").innerHTML+
('<input type="button" value="'+document.getElementById("add").value+'"><br>');

It works. Now i am adding onClick attribute:

document.getElementById("items").innerHTML=document.getElementById("items").innerHTML+
    ('<input type="button" onClick="alert("'+document.getElementById("add").value+'")"
     value="'+document.getElementById("add").value+'"><br>');

I want to display an alert with button name (add is button id) if I click on button. But no alert displayed. Probably I made i mistake in onClick, because button is being added.
Whats wrong with my code?

That's probably the worst way to add an element imaginable ? — adeneo
– adeneo, Commented Apr 9, 2014 at 16:43

adeneo · Accepted Answer · 2014-04-09 16:46:24Z

26

Do it the proper way

var items  = document.getElementById("items"),
    button = document.createElement('input'),
    br     = document.createElement('br'),
    add    = document.getElementById("add").value;

button.type  = 'button';
button.value = add;
button.addEventListener('click', function() {
    alert(add);
}, false);

items.appendChild(button);
items.appendChild(br);

answered Apr 9, 2014 at 16:46

adeneo

319k29 gold badges410 silver badges392 bronze badges

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

10 Comments

Sterling Archer Over a year ago

Darn, you beat me to it.

karliwson Over a year ago

Just a compatibility observation: In Internet Explorer, addEventListener() is only supported from version 9 and higher. I would suggest button.onclick = function(){...}.

Sterling Archer Over a year ago

@Kekas onclick only supports one event, whilst this allows multiple events. For older versions I believe attachEvent is what you would use.

karliwson Over a year ago

Right, but if you only need one event, onclick should do the trick.

adeneo Over a year ago

@Kekas - If old IE is an issue, you'd use attachEvent, and there are a million examples online on how to do that, so I wont write it all in the answer, but I believe that addEventListener should be used over onclick whenever possible, which is always.

|

nicael · Accepted Answer · 2014-04-09 17:01:36Z

0

I managed to do it!

 document.getElementById("items").innerHTML=document.getElementById("items").innerHTML
+('<input type="button" onClick="alert(\''+document.getElementById("add").value+'\')"
 value="'+document.getElementById("add").value+'"><br>')

I replaced " (double quote) with \' (single quote) in alert.
Works, button added, alert displayed.

answered Apr 9, 2014 at 17:01

nicael

19.1k13 gold badges65 silver badges93 bronze badges

1 Comment

adeneo Over a year ago

Good for you, post your own answer when you're able to fix the issue, but this is still the most horid way to add an element ever invented, and you should consider rewriting it.

Collectives™ on Stack Overflow

Javascript - Add button with onClick attribute dynamically

2 Answers 2

10 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

10 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related