Javascript - onclick

私はこのサイトを使っていつも問題を探し出しています:Pまあ、私は自分の問題を抱えているので、私はGoogleの周りを簡単に探し回っているとは思えません。それは約2時間、私は最終的に質問を投稿し、皆さんの考えを見ることにしました。

私がここで達成しようとしているのは、div上に表示されたボタンをクリックすると、そのボタンをクリックすると編集ペインが開きます。ボタンはdiv上に正しく表示されますが、何らかの理由で私の人生を救うためにonclick関数を働かせることができません。ここで私が作業しているコードです。十分でない場合は、私に知らせてください。もう少しソースを追加します。 :P

function place_widget(name, properties){
//bbox
var pleft = properties[0];
var ptop = properties[1];
var width = properties[2];
var height = properties[3];
var pright = pleft + width;
var pbottom = pleft + height;
var bbox = [pleft, ptop, pright, pbottom];
boxes[name] = bbox;

//ID's
var id = 'widget_' + name;
var editspanid = id + "_editspan";
var editbuttonid = id + "_editbutton";
var editpaneid = id + "_editpane";

//Creating Elements
var div = "<div id='" + id + "' class='widget' onmouseover='widget_hover(event);' onmouseout='widget_out(event);'>";
var editbutton = "";
var editspan = "" + editbutton + "";
var editpane = ":)";
div += editspan + editpane + "</div>";
body.innerHTML += div;

//Configuring Elements
var editspanelement = document.getElementById(editspanid);
var editbuttonelement = document.getElementById(editbuttonid);
editbuttonelement.onclick = alert; //Does nothing.
var editpaneelement = document.getElementById(editpaneid);
var mainelement = document.getElementById('widget_' + name);
mainelement.style.left = (pleft + leftmost) + "px";
mainelement.style.top = (ptop + topmost) + "px";
mainelement.style.width = width;
mainelement.style.height = height;
getContentsAJAX(name);
}

申し訳ありませんが、醜いコード:P誰もがなぜonclick機能が動作していない考えている?

また、少しの追加情報:もし私が火薬瓶を開けて入れたら:

document.getElementById('widget_Text_01_editbutton').onclick = alert;

ボタンをクリックすると、次のようになります。

uncaught exception: [Exception... "Illegal operation on WrappedNative prototype object" nsresult: "0x8057000c (NS_ERROR_XPC_BAD_OP_ON_WN_PROTO)" location: "native frame ::  ::  :: line 0" data: no]

私はそれが何を意味するのか正確には分からない。

ありがとう!

1
そうです。私は将来それを間違いなく考慮します。ありがとう!
追加された 著者 Jeremy,
JS/HTMLコードの投稿に関する一般的なコメント:いくつかの人々はコードを見ていくつかの間違いを見つけられることがありますが、あなたがそれをよりアクセスしやすくしてくれれば他の人に助けになるでしょう。単にファイルにコピーしてブラウザで開くか、または2) jsfiddle.net に置くだけです。
追加された 著者 Tom,

3 答え

あなたは変更しようとすることができます:


に:


また、あなたが書いた関数を「警告」していますか?

1
追加された
うーん。これはonclickの初期化時にtoggleEditを呼び出し、私が間違っていなければonclickイベントとしてその値を返します。私がやろうとしていることではありません。私は正直なところ、私はそこにまだonclickを持っていたことに気づいていませんでした:私はこれを働かせようとする方法が多すぎます。ありがとう!
追加された 著者 Jeremy,
ええ、わかりました。 hardheadednessには申し訳ありません:P toggleEdit();私はそれをアラートに変更しても機能しませんでした。だから今私のtoggleEdit関数に問題があると思います。それは私の終わりにもかかわらず。それはあなたのソリューションがトリックをしたようです! :) どうもありがとうございました!しかし、私はまだbuttonelement.onclick関数がうまくいかない理由について少し興味があります。
追加された 著者 Jeremy,
いいえ、それはtoggleEdit()を呼び出し、その関数を画像のonclickイベントハンドラにバインドする無名関数を作成します。
追加された 著者 Mike Christensen,
そうです、window.alertはJavaScript関数ではなく、クリックハンドラのコールバックとして使うことはできません。あなたは、 .onclick = function(){alert( '');のようなJavascript関数でラップする必要があります。 };
追加された 著者 Mike Christensen,
いいえ、引用符で囲まれているため、クリックすると文字列が評価されます。
追加された 著者 jfriend00,

これを変更して開始します。

editbuttonelement.onclick = alert; //Does nothing.

これに:

editbuttonelement.onclick = function() {alert("Got a click");};

これを変更してください:

var editbutton = "";

これに:

var editbutton = "";

何をクリックしていますか?画像、リンク、スパン?あなたはクリックイベントを取得していますか?

1
追加された
それは実際に私が以前に持っていた別の問題です。私はそのようなことをしていましたが、匿名関数を作成するとき、関数が名前を持つ必要があることをFirefoxに伝えていました(奇妙なのですか?)。しかし、私はちょうどあなたが要求したものを入れて、それは私にエラーを与えることはありませんが、まだ起こります。しかし、ありがとう。
追加された 著者 Jeremy,
document.getElementById('widget_Text_01_editbutton').onclick = alert;

alert 内の window 以外の要素(element)に this を設定しようとしているため、不正な呼び出し

alert.call( {} )
//TypeError: Illegal invocation

alert.bind( window ).call( {} )
//works

だからどちらか:

document.getElementById('widget_Text_01_editbutton').onclick = alert.bind( window );

上記の機能は一部のブラウザでのみ機能するため、さらに優れています。

document.getElementById('widget_Text_01_editbutton').onclick = function(){alert();};
0
追加された
レスポンスありがとう!残念ながら、これをFireBugに入れると、ボタンをクリックしたときと全く同じエラーが表示されます。また、コードの中でも役に立たない。これは本当にすごいですよね? :Pありがとう!
追加された 著者 Jeremy,
それは同じエラーではない、あなたが今得ているエラーは警告するものがないということです(これはfirefox特有です、クロムは何も警告しません)。 alert.bind(window、 "123");
追加された 著者 Esailija,
JavaScript - 日本のコミュニティ
JavaScript - 日本のコミュニティ
2 参加者の

日本人コミュニティのjavascript