Add event to button with javascript

Question

In this page there's a way to dynamic add html (textbox,input button and radio elements with javascript

my questioon is how can i add an event to the button, imagine that i only want create the button, not the textbox or the radio element.

UPDATE
I'm having problems here... I have tried some of the solutions provided but it causes me problems, let me try to explain...

im trying to open xml file, read it and create html object with the properties of the xml, so far so good, but if i try to add the event, xmlObj cames null any ideias??

i have this...

script = "function OnClientDragEnd(dock, args)" + 
                         "   {" + 
                                "var hidd = document.getElementById('" + HiddenField1.Value + "');" + 
                                "hidd.value = dock.get_id();" + 
                    //"alert(hidd.value);" + 
                                "var xmlDoc = new ActiveXObject('Microsoft.XMLDOM');" + 
                                "xmlDoc.async = 'false';" + 
                                "xmlDoc.load('Config.xml');" + 
                                "xmlObj = xmlDoc.documentElement;" + 
                                "if (xmlObj.childNodes.length>0)" + 
                                "{" + 
                                "   for (var i = 0; i < xmlObj.childNodes.length; i++)" + 
                                "   {" + 
                                "       if (xmlObj.childNodes(i).getElementsByTagName('Id')[0].text == hidd.value){" + 
                                "           var txtTb2 = document.getElementById('" + TextBox4.ClientID + "');" + 
                                "           txtTb2.value = xmlObj.childNodes(i).getElementsByTagName('Titulo')[0].text;" + 
                                "           y = xmlObj.childNodes(i).getElementsByTagName('Titulo')[0].nextSibling;" + 
                                "           yy = xmlObj.childNodes(i).getElementsByTagName('Titulo')[0].previousSibling;" + 
                    //"           alert(y.nodeName);" + 
                                "           for(i=0;i<yy.text;i++){" + 
                                "               alert('aa');" + 
                                "               var tbox = document.createElement('input');" + 
                                "               tbox.setAttribute('type', 'text');" + 
                                "               tbox.setAttribute('value', y.text);" + 
                                "               tbox.setAttribute('name', 'name');" + 
                                "               var abcd = document.getElementById('spanObjDock');" + 
                                "               abcd.appendChild(tbox);" + 
                                "               var bt1 = document.createElement('input');" + 
                                "               bt1.setAttribute('name', 'mais');" + 
                                "               bt1.setAttribute('value', '+');" + 
                                "               bt1.setAttribute('type', 'button');" + 
                                "               bt1.onclick = function (){alert('Clicked!');};" + //--> this dont work 
                                //"               bt1.setAttribute('Click','addRadioButton()');" + //--> and this dont work 
                                "               abcd.appendChild(bt1);" + 
                                "               var bt2 = document.createElement('input');" + 
                                "               bt2.setAttribute('name', 'menos');" + 
                                "               bt2.setAttribute('value', '-');" + 
                                "               bt2.setAttribute('type', 'button');" + 
                                "               abcd.appendChild(bt2);" + 
                                "               var break1 = document.createElement('br');" + 
                                "               abcd.appendChild(break1);" + 
                                "               node = y;" + 
                                "               y=y.nextSibling;" + 
                                "           }" + 
                                "           break;    " +//<input type="button" onclick="" name"as" /> 
                                "       }" + 
                                "   }" + 
                                "}" + 
                            "}";//+

score 20 · Accepted Answer · answered Feb 04 '10 at 13:32

20

Simply, use addEventListener method:

buttonRef.addEventListener("click", function() {
    alert("Blah blah...");
}, false);

(You'll have to Google for cross-browser solution. IE doesn't support addEventListener)

Where buttonRef is a reference to button. How can you get that reference? There's lots of ways to do that. You can use document.getElementById() or any other method from this "family".

answered Feb 04 '10 at 13:32

Crozin

43,890
13
88
135

It works! I have some difficulties, anything that i eventually added, i received error that xmlObj was null, but i restart VS2008 close some windows and it starts to work. thanks!! – SlimBoy Feb 04 '10 at 15:41
Found this link that helped https://developer.mozilla.org/En/DOM:element.addEventListener – SlimBoy Feb 04 '10 at 18:46
1

IE 9 actually supports `addEventListener` [ref](http://stackoverflow.com/questions/6927637/addeventlistener-in-internet-explorer#6927800). – another Feb 16 '17 at 18:38

score 5 · Answer 2 · answered Feb 04 '10 at 13:30

5

var element = document.createElement("input");
element.onclick = function() {alert('Clicked!');};

answered Feb 04 '10 at 13:30

Max Shawabkeh

37,799
10
82
91

jinx! darn, beat me by one second... shouldn't have put that extra example in! – Andy E Feb 04 '10 at 13:31
Actually it seems the timestamp is exactly the same for both our posts. :D – Max Shawabkeh Feb 04 '10 at 13:33

score 3 · Answer 3 · answered Feb 04 '10 at 13:30

3

Probably the easiest cross-browser way is to set the event name as a property of the element:

Element.onclick = function () 
{
   // do something...
}
Element.onmouseup = function () 
{
   // do something else...
}

answered Feb 04 '10 at 13:30

Andy E

338,112
86
474
445

score 2 · Answer 4 · answered Feb 04 '10 at 13:33

2

You have to attach the new event when creating the DOM element.

For example :

var e = document.createElement('input');
e.onclick = function()
            {
               alert('Test');
            };

answered Feb 04 '10 at 13:33

Boris Guéry

47,316
8
52
87

Add event to button with javascript

4 Answers4

Linked

Related