Javascript: onclick/onsubmit for dynamically created button

Question

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

GorillaMoe · Accepted Answer · 2011-08-15 15:23:14Z

56

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);
};

answered Aug 15, 2011 at 15:23

GorillaMoe

4,1342 gold badges29 silver badges29 bronze badges

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

5 Comments

Christian Over a year ago

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 Over a year ago

A working solution - adding an event listener to the button - for my problem I got here: stackoverflow.com/questions/7067941/…

Amc_rtty Over a year ago

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.

abc Over a year ago

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?

GorillaMoe Over a year ago

@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);};}

Kurohige · Accepted Answer · 2018-12-22 22:42:09Z

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>

edited Dec 22, 2018 at 22:42

Kurohige

1,4262 gold badges17 silver badges25 bronze badges

answered Dec 22, 2018 at 20:13

Avinash

196 bronze badges

Collectives™ on Stack Overflow

Javascript: onclick/onsubmit for dynamically created button

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related