Javascript: onclick/onsubmit for dynamically created button
101,444
Solution 1
var foo = function(){
var button = document.createElement('button');
button.innerHTML = 'click me';
button.onclick = function(){
alert('here be dragons');return false;
};
// where do we want to have the button to appear?
// you can append it to another element just by doing something like
// document.getElementById('foobutton').appendChild(button);
document.body.appendChild(button);
};
Solution 2
Here is a version with attributes for input:
<button onclick="myFun()">Add More</button>
<script>
function myFun() {
var x = document.createElement("INPUT");
x.setAttribute("type", "file");
x.setAttribute("id", "file");
document.body.appendChild(x);
x.onchange = function () {
hello();
};
btn.appendChild(t);
document.body.appendChild(btn);
}
function hello() {
window.alert("hello!");
}
</script>
![Christian](https://i.stack.imgur.com/8D8Yc.jpg?s=256&g=1)
Author by
Christian
Updated on December 23, 2020Comments
-
Christian over 3 years
I dynamically create a button in the way I found in the Internet:
Page = function(...) { ... }; Page.prototype = { ... addButton : function() { var b = content.document.createElement('button'); b.onclick = function() { alert('OnClick'); } }, ... };
Unfortunately, it's not working and throwing the following error:
Error: [Exception... "Component is not available" nsresult: "0x80040111 (NS_ERROR_NOT_AVAILABLE)" location: "JS frame :: chrome://knowledgizer/content /knowledgizer.js :: <TOP_LEVEL> :: line 137" data: no] Source File: chrome://browser/content/tabbrowser.xml Line: 434
The solution with setAttribute work:
b.setAttribute("onClick", "alert('OnClick')");
However, I want to call a class method (instead of alert), and the b.onclick syntax looks better in that respect, I hope/think. is this onclick case senstive? Because if I write
b.onClick = function() {alert("OnClick");} // notice the spelling onclick vs onClick
I don't get the error above, but it's still not working, i.e. I don't get the alert. I'm thankful for any tips.
As a bonus question: How can I avoid that the current page is reload when the button is clicked? I just like call a method and not to cause a page reload.
Thanks and best regards,
Christian
-
Christian almost 13 yearsThanks, your example works here too. I've noticed that I constantly use content.document.createElement() instead document.createElement(). So far, I had no problems, but obviously there is a significant difference. when I remove the 'content.' in my code it's working.
-
Christian almost 13 yearsA working solution - adding an event listener to the button - for my problem I got here: stackoverflow.com/questions/7067941/…
-
Amc_rtty over 11 yearsYou're a star. Nothing worked on my problem in IE9, apart from this. I was trying to add the button dynamically with jQuery, which worked in all browsers but not IE9.
-
abc over 9 yearsHey ! I am doing something similar. I create some 10 buttons using a for loop. In the alert, i need to show the number on button. How to do it?
-
Walialu over 9 years@abc I guess you are using a for loop with a counter, like so for(var i =0; i<array.length ;i++){....... button.onclick = function(){alert(I);};}