18

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

2 Answers 2

54
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);
};
5
  • Thanks, 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
    Aug 15, 2011 at 15:45
  • 1
    A working solution - adding an event listener to the button - for my problem I got here: stackoverflow.com/questions/7067941/…
    – Christian
    Aug 16, 2011 at 12:27
  • You'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.
    – Amc_rtty
    Feb 4, 2013 at 16:29
  • 1
    Hey ! 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?
    – abc
    Oct 2, 2014 at 2:35
  • @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);};}
    – Walialu
    Oct 2, 2014 at 5:32
1

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.