39

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>
Improve this question
1
  • 6
    Pure javascript? (it's easier to use an js library like jQuery) Commented Oct 9, 2011 at 22:45

4 Answers 4

Reset to default
67

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.

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

2 Comments

@mekici - Note, this answer had a stray ) on the alert() line, which I removed. This was a simple mistake. Please read the entire answer.
@mekici - And see reference.sitepoint.com/javascript/Element/setAttribute and using the setAttribute() method. I have, personally, never trusted it.
6

this:

element.setAttribute("onclick", alert("blabla"));

should be:

element.onclick = function () {
  alert("blabla");
}

Because you call alert instead push alert as string in attribute

Improve this answer

5 Comments

No no no. It should be el.onclick=function(){}.
element.setAttribute("onclick", 'alert("blabla")');
@mekici - When you use the form in that comment, you're using eval() to evaluate the alert(). This is generally considered a Bad Idea (both in performance and security). Using an anonymous function set to the handler (as neworld has and T.J. Crowder have) is the accepted best practice.
Yes your solution works too! thanks for that! i didnt check element.setAttribute("onclick", 'alert("blabla")'); on chrome but it works on ie9 and mozilla. @T.J. Crowder's solution doesnt work ie9, mozilla chrome..
@mekici - That doesn't make any sense. What part didn't work?
6 
<!DOCTYPE html>
<html>
<body>

<p>Click the button to make a BUTTON element with text.</p>

<button onclick="myFunction()">Try it</button>

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

}
</script>

</body>
</html>
Improve this answer

7 Comments

Please add an explaination to your code. Code only answers are not welcome on StackOverflow.
@L.Guthardt I am not agree with you. If the code does its job, absence of explanation is not a big deal.
@yılmaz Code can only tell you the how, it doesn't tell you the why. That's what you need comments for. [...] While a code-only answer get the person who asked the question past whatever hurdle they might be facing, it doesn't do them or future visitors much good in the long run. Please have a look at this meta discussion
@L.Guthardt "it doesn't tell you the why" > "sometimes" is missing.
@L.Guthardt "sometimes" part is valid for those who can read code.
|
0

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.

Improve this answer

2 Comments

You don't need the setAttribute() at all.
there is no name assigned to function. And it will throw error.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.