Creating Dynamic button with click event in JavaScript

Question

How can I create a dynamic button with a click event with JavaScript   I tried this  but when I click the add button  an alert message show up  It s not what I want - I want to be able to click the button which is dynamically created    lt script language  javascript  gt      function add type              Create an input type dynamically             var element   document createElement  input              Assign different attributes to the element           element setAttribute  type   type           element setAttribute  value   type           element setAttribute  name   type           element setAttribute  onclick   alert  blabla              var foo   document getElementById  fooBar              Append the element in page  in span             foo appendChild element           lt  script gt

User · Answer

Firstly  you need to change this line   element setAttribute  onclick   alert  blabla       To something like this   element setAttribute  onclick   function     alert  blabla          Secondly  you may have browser compatibility issues when attaching events that way   You might need to use  attachEvent    addEvent  depending on which browser   I haven t tried manually setting event handlers for a while  but I remember firefox and IE treating them differently

User · Answer

lt  DOCTYPE html gt   lt html gt   lt body gt    lt p gt Click the button to make a BUTTON element with text  lt  p gt    lt button onclick  myFunction    gt Try it lt  button gt    lt script gt  function myFunction         var btn   document createElement  BUTTON        var t   document createTextNode  CLICK ME         btn setAttribute  style   color red font-size 23px         btn appendChild t       document body appendChild btn        btn setAttribute  onclick   alert  clicked         lt  script gt    lt  body gt   lt  html gt

User · Answer

Wow you re close  Edits in comments    x000D   x000D  function add type    x000D      Create an input type dynamically     x000D    var element   document createElement  input    x000D      Assign different attributes to the element   x000D    element type   type  x000D    element value   type     Really  You want the default value to be the type string  x000D    element name   type     And the name too  x000D    element onclick   function        Note this is a function x000D      alert  blabla    x000D       x000D   x000D    var foo   document getElementById  fooBar    x000D      Append the element in page  in span     x000D    foo appendChild element   x000D    x000D  document getElementById  btnAdd   onclick   function     x000D    add  text    x000D     x000D   lt input type  button  id  btnAdd  value  Add Text Field  gt  x000D   lt p id  fooBar  gt Fields  lt  p gt  x000D   x000D   x000D    Now  instead of setting the onclick property of the element  which is called  DOM0 event handling   you might consider using addEventListener  on most browsers  or attachEvent  on all but very recent Microsoft browsers  nbsp  mdash  you ll have to detect and handle both cases nbsp  mdash  as that form  called  DOM2 event handling   has more flexibility  But if you don t need multiple handlers and such  the old DOM0 way works fine     Separately from the above  You might consider using a good JavaScript library like jQuery  Prototype  YUI  Closure  or any of several others  They smooth over browsers differences like the addEventListener   attachEvent thing  provide useful utility features  and various other things  Obviously there s nothing a library can do that you can t do without one  as the libraries are just JavaScript code  But when you use a good library with a broad user base  you get the benefit of a huge amount of work already done by other people dealing with those browsers differences  etc

User · Answer

this   element setAttribute  onclick   alert  blabla       should be   element onclick   function        alert  blabla        Because you call alert instead push alert as string in attribute

[javascript] Creating Dynamic button with click event in JavaScript

Examples related to javascript

Examples related to html