1

サンプルコードがあります：

<input width="50" type="text" value="" name="application_id" id="text_input">
<a href="#" onclick="addSelect('1', 'Test Name');" title="Click to add this item">Test Name</a>

そしてジャバスクリプト

function addSelect(id, title) {
    document.getElementById('text_input').value = title;
}

コードを実行すると、結果エラーはaddSelect is not defined? ここでデモ、それを合わせる方法は？

4

2 に答える 2

5

スクリプトは実行するようonLoadに定義されています。つまり、関数は期待どおりにグローバルスコープで使用できません。onLoadこれは、何らかのメソッド（jsFiddleが使用する方法）のローカルスコープで定義されます。この設定では、jsFiddleはコードを次のようなものに入れると思います。

window.onload = function () {
    // Your code
};

（これはオプションに似ていonDomReadyます）

これは、適切なイベントのバインドについて心配する必要がなく、スクリプトをテストするだけでよいためです（ページがロードされていることを確認してください）。

グローバルスコープにあると予想される関数を呼び出そうとすると、機能しません。左側の設定をno wrap (head)（またはno wrap (body)）に変更するだけです

http://jsfiddle.net/TmLut/3/

そして、mplungjanが指摘しているように、私はどういうわけかまったく気づいていませんでしたonclickが、アンカー要素のを使用するときは、リンクのデフォルトの動作を防止したいと思うでしょう（「＃」に移動するだけの場合でも）。いくつかの方法で達成できますが、1つは次のとおりです。

<a href="#" onclick="runFunction();return false;">Text</a>

同時に、インラインハンドラーを使用するべきではなく、イベントをJavascriptで完全にバインドする必要があると主張する人もいるかもしれません。その場合に応じて、デフォルトの動作を引き続き防止するオプションがあります。いずれの場合でも、eventオブジェクトを取得して（ブラウザーごとに正規化されています...ちなみに、jQueryが実行します）event.preventDefault();、メソッドを呼び出すことができます。

于 2012-11-27T06:54:01.167 に答える
0

ここにそのhttp://jsfiddle.net/TmLut/4/

左側の選択ボックスに変更onloadしましたhead

于 2012-11-27T06:57:42.843 に答える