Creating Dynamic button with click event in JavaScript

前端未结

关注

 4  1539

栀梦

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

相关标签:

4条回答

Happy的楠姐

2020-11-28 08:00
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.
0 讨论(0)
发布评论:

提交评论
- 加载中...

一向

2020-11-28 08:06

<!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>

0 讨论(0)

爱一瞬间的悲伤

2020-11-28 08:06
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.
0 讨论(0)
发布评论:

提交评论
- 加载中...
情歌与酒

2020-11-28 08:21
this:
```
element.setAttribute("onclick", alert("blabla"));
```
should be:
```
element.onclick = function () {
  alert("blabla");
}
```
Because you call alert instead push alert as string in attribute
0 讨论(0)
发布评论:

提交评论
- 加载中...