CODEWITHSUNDEEP
javascripthtml
SlimBoy
SlimBoy

Reputation: 421

Add event to button with javascript

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" /> 
                                "       }" + 
                                "   }" + 
                                "}" + 
                            "}";//+

Upvotes: 15

Views: 57686

Answers (4)

Boris Gu&#233;ry
Boris Gu&#233;ry

Reputation: 47585

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

For example : 

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

Upvotes: 2

Crozin
Crozin

Reputation: 44376

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".

Upvotes: 24

Andy E
Andy E

Reputation: 344567

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...
}

Upvotes: 3

Max Shawabkeh
Max Shawabkeh

Reputation: 38603

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

Upvotes: 6

Related Questions