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.

<script language="javascript">
    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);

    }
</script>

Answer 1

Wow you’re close. Edits in comments:

function add(type) {
  //Create an input type dynamically.   
  var element = document.createElement("input");
  //Assign different attributes to the element. 
  element.type = type;
  element.value = type; // Really? You want the default value to be the type string?
  element.name = type; // And the name too?
  element.onclick = function() { // Note this is a function
    alert("blabla");
  };

  var foo = document.getElementById("fooBar");
  //Append the element in page (in span).  
  foo.appendChild(element);
}
document.getElementById("btnAdd").onclick = function() {
  add("text");
};

<input type="button" id="btnAdd" value="Add Text Field">
<p id="fooBar">Fields:</p>

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) — you’ll have to detect and handle both cases — 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.