11

検索ボタンを押してJavaScript関数を機能させようとしていますが、関数が実行されていないようです。ガイドしてください。フィドル。

<form action="" method="get" id="searchform" >
    <input name="q" type="text" id="search" size="32" maxlength="128" class="txt"/>
    <input type="submit" id="hit" value="Search" onclick="myFunction()" class="btn"/>
</form>

これが JS です。

function myFunction() {
 alert("I am an alert box!");
}
4

6 に答える 6

11

関数を body でラップしました。onLoadこれを no wrap-in に変更するだけ<head>です。このフィドルを参照してください。

function myFunction() {
    alert("I am an alert box!");
}

};
^^

};また、コードに余分なものがあり、

アップデート：

これは、次の理由で発生します。

  • 関数が 内に配置されている場合、準備完了コールバック内(および内部オブジェクト内) で$(document).readyのみ使用できます。外部から参照することはできません。

  • ただし、ready 関数の外に配置すると、グローバル スコープが取得されます。つまり、どこからでも呼び出すことができます。

于 2013-03-02T05:28:58.880 に答える
6

以下は私にとってはうまくいきます：

        <form action="" method="get" id="searchform" >
          <input name="q" type="text" id="search" size="32" maxlength="128" class="txt"  >
          <input type="submit" id="hit" value="Search" onclick="myFunction()" class="btn">
        </form>
        <script>
           function myFunction() {
              alert("I am an alert box!");
           }
        </script>

しかし、質問の最後に があることに気付き};ました - おそらくそれが構文エラーの原因ですか?

アップデート：

問題は（以外に};）フィドラーのセットアップにありました。これをチェックしてください！

于 2013-03-02T05:22:21.843 に答える
3

JavaScript ファイルのどこかに構文エラーがある可能性が最も高いと思われます。私がこれを言う理由は、あなたが示したコードを使用してアラートが表示されるのを止めるものがないからです.

ブラウザーのエラー コンソール (IE および Chrome では F12 キー) を確認し、エラーがあるかどうかを確認します。エラーがあると、関数の定義が停止します。

于 2013-03-02T05:17:53.400 に答える
3

私はあなたのフィドルを見ました、それは余分な閉じたブラケットを持っています。これはうまくいくはずです。

 function myFunction() {
    alert("I am an alert box!");
    return false;
 };

あなたのフィドルは次のようになりました：

 function myFunction() {
    alert("I am an alert box!");
    } 
};

編集 1:return falseユーザーがフォームを送信したくないので、 追加しました。

編集2：

誰も JS Fiddle の問題を説明したくないので、私が突き刺します。

元の JS Fiddle では、「onLoad」がサイドバー メニューの 2 番目のドロップダウンで使用されます。

この設定が機能しない理由は、JS Fiddle が onload 関数で JavaScript コードを実行するためです。これは、myFunction が範囲外であることを意味します。

これが、ドロップダウン メニューで [No wrap - in] および [No wrap - in] オプションのいずれかを使用する必要がある理由です。代わりにこれら 2 つのオプションを使用すると、関数myFunctionはグローバル スコープになります。

それが物事を明確にすることを願っています。

編集 3

onload イベントを使用したい場合。代わりにクリック イベント ハンドラーを追加onclickし、送信ボタンのマークアップで属性を削除することができます。

一般的には、JavaScript を使用してイベント ハンドラーを設定する方がよいでしょう。

document.getElementById('hit').addEventListener('click', function() {
    alert("I am an alert box!");
});

jQuery を使用する場合は、次のようにします。

$('#hit').click(function() {
    alert("I am an alert box!");
});
于 2013-03-02T05:20:26.990 に答える
0

関数をtry-catchブロックに入れます...動作するはずです

function myFunction() {
    try {    
        alert("I am an alert box!");
        //enter code here
        return false;
    }
    catch (err) {
        txt = "There was an error on this page.\n\n";
        txt += "Error description: " + err.message + "\n\n";
        txt += "Click OK to continue.\n\n";
        alert(txt);
    }
}
于 2013-11-26T21:25:33.060 に答える