0

私はこのフォームを持っています:

<form id="searchForm" class="search_field" method="get" action="">
...
...
</form>

次に、このJavaScript：

    var form = document.getElementById("searchForm");
    form.doSearch1.onclick = searchPage;
    form.doSearch2.onclick = searchPage;
    form.showFeatureChoices.onclick = function( )
        {
            var cbs = form.featType;
            for ( var c = 0; c < cbs.length; ++c )
            {
                cbs[c].checked = false;
            }
            document.getElementById("featuresDiv").style.display = "block";
        }

function searchPage()
{
    var form = document.getElementById("searchForm");
    var searchText = form.searchBox.value.replace(/-/g,"");
    form.searchBox.value = searchText;

    if (searchText != "") 
    {
        // collect features to search for:
        var features = [ ];
        var featTypes = form.featType;
        for ( var f = 0; f < featTypes.length; ++f )
        {
            if ( featTypes[f].checked ) features.push( featTypes[f].value );
        }
        featureList = "'" + features.join("','") + "'";

        searchMsg("Searching for '" + searchText + "' ...");
        // startStatusUpdate(1000);
        // findTask.execute(findParams, showResults);
        var accord = dijit.byId("accordianContainer");
        var resultsPane = dijit.byId("resultsPane");
        accord.selectChild(resultsPane,true);

        doSearch( searchText, featureList );
    }
    else
    {
      searchMsg("No search criteria entered, enter search text");
    }   
}

このコードを と同じファイルに埋め込むと、正常に<form...動作します。

ただし、このjsを別のファイルに入れ、インクルードファイルとして使用する場合:

<script type="text/javascript" src="Views/JS/main.js"></script>

「オブジェクトが必要です」というエラーが表示され、次の行を指しています。

form.doSearch1.onclick = searchPage;
form.doSearch2.onclick = searchPage;

これを修正する方法はありますか？

もう少し情報を追加すると、上記の js コードは main.js というファイルにあり、JS というフォルダーにあり、Js は Views というフォルダーにあります。の

事前にどうもありがとう

4

1 に答える 1

0

同じページに JavaScript コードを含めると、form要素との関係はどこにあるでしょうか? （前後？）外部のJavaScriptファイルを参照する場合は？

前者の場合、コードはファイルの最後にあり、後者の場合、script参照タグは先頭にあると思いますか?

それが本当なら、何が起こっているかというと、DOM の準備が整う前にこのコードが実行されているということです:

var form = document.getElementById("searchForm");
form.doSearch1.onclick = searchPage;
form.doSearch2.onclick = searchPage;

formタグがまだ DOM にレンダリングされていない場合、その最初の行は何も検出されず、結果として後続の行は失敗します。1 つのアプローチは、script参照タグを最後に配置することですが、それはハックのように思えます。ページヘッダーにそれらを保持する正当な理由がある場合もありますが、多くの場合、コードの管理がより明確になるためです。 DOM の準備が整うまで JavaScript コードの実行を延期する方法は他にもあります。

于 2013-04-01T14:32:26.877 に答える