15

インターネットで見つけた方法でボタンを動的に作成します。

 Page = function(...) {
   ...
 };

 Page.prototype = {
   ...
   addButton : function() {
     var b = content.document.createElement('button');
     b.onclick = function() { alert('OnClick'); }
   },
   ...
 };

残念ながら、それは機能せず、次のエラーがスローされます。

  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

setAttribute を使用したソリューションは次のように機能します。

b.setAttribute("onClick", "alert('OnClick')");

ただし、(アラートの代わりに) クラス メソッドを呼び出したいのですが、その点では b.onclick 構文の方が見栄えが良いと思います。このonclickは大文字と小文字を区別しますか? なぜなら、私が書くなら

b.onClick = function() {alert("OnClick");} // notice the spelling onclick vs onClick

上記のエラーは表示されませんが、まだ機能していません。つまり、アラートが表示されません。ヒントに感謝します。

おまけの質問: ボタンをクリックしたときに現在のページがリロードされないようにするにはどうすればよいですか? 私はメソッドを呼び出すのが好きで、ページのリロードを引き起こさないようにしています。

よろしくお願いします、

キリスト教徒

4

2 に答える 2

51
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);
};
于 2011-08-15T15:23:14.323 に答える