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.
<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>
4 answers
solution1
50 ACCPTED 2011-10-09 22:48:28
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.
solution2
3 2018-07-17 07:48:47
<!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>
solution3
3 2011-10-09 22:47:46
this:
element.setAttribute("onclick", alert("blabla"));
should be:
element.onclick = function () {
alert("blabla");
}
Because you call alert instead push alert as string in attribute
solution4
1 2011-10-09 22:48:01
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.