2011-08-20 32 views
5

ウィンドウのロード後に実行されるjavascriptがありますが、何らかの理由で実行されることはありません。関数が呼び出されていません

は、ここに私のコードです:

function setClasses(){ 
     document.getElementsByClassName("gchoice_35_0")[0].onclick = sedanShow; 
     document.getElementsByClassName("gchoice_22_0")[0].onclick = sedanShow; 
     document.getElementsByClassName("gchoice_34_0")[0].onclick = sedanShow; 

     document.getElementsByClassName("gchoice_34_1")[0].onclick = suvShow; 
     document.getElementsByClassName("gchoice_35_1")[0].onclick = suvShow; 
     document.getElementsByClassName("gchoice_22_1")[0].onclick = suvShow; 

     document.getElementsByClassName("gchoice_22_2")[0].onclick = vanShow; 
     document.getElementsByClassName("gchoice_35_2")[0].onclick = vanShow; 
     document.getElementsByClassName("gchoice_34_2")[0].onclick = vanShow; 
    } 

window.onload = setClasses; 

setClasses()関数が実行されていないようです。しかし、FireBugのコンソールから手動で呼び出すと動作します。

コードは私のWebページのヘッダーに配置されています。

何か助けていただければ幸いです。

完全なHTMLスニペット:

<head> 
...... 

<script type="text/javascript"> 
function setClasses(){ 
     document.getElementsByClassName("gchoice_35_0")[0].onclick = sedanShow; 
     document.getElementsByClassName("gchoice_22_0")[0].onclick = sedanShow; 
     document.getElementsByClassName("gchoice_34_0")[0].onclick = sedanShow; 

     document.getElementsByClassName("gchoice_34_1")[0].onclick = suvShow; 
     document.getElementsByClassName("gchoice_35_1")[0].onclick = suvShow; 
     document.getElementsByClassName("gchoice_22_1")[0].onclick = suvShow; 

     document.getElementsByClassName("gchoice_22_2")[0].onclick = vanShow; 
     document.getElementsByClassName("gchoice_35_2")[0].onclick = vanShow; 
     document.getElementsByClassName("gchoice_34_2")[0].onclick = vanShow; 
    } 

    function sedanShow(){ 
      document.getElementById("sedan").style.display="inline" 
      document.getElementById("suv").style.display="none" 
      document.getElementById("van").style.display="none" 
     } 
     function suvShow(){ 
      document.getElementById("sedan").style.display="none" 
      document.getElementById("suv").style.display="inline" 
      document.getElementById("van").style.display="none" 
     } 
     function vanShow(){ 
      document.getElementById("sedan").style.display="none" 
      document.getElementById("suv").style.display="none" 
      document.getElementById("van").style.display="inline" 
     } 
    window.onload = setClasses; 
    </script> 

......

+3

を?動作しない完全なHTMLスニペットを投稿しても構いませんか? –

+3

私はsetClassesが動作していると思うが、それは問題ではない。あなたのsetClasses関数にアラートを置くと、それは起動します。私はそれがおそらくあなたのonclickプロパティを設定する方法だと思う。 IEでは文字列として設定する必要がありますが、Firefoxではそれを関数にする必要があります。 JQueryとYUIはイベントユーティリティを提供することでこれを軽減します。これらのフレームワークを調べることをお勧めします。これは、対処しなければならない多くのクロスブラウザの問題を軽減するためです。 – Zoidberg

+0

このコードを上書きしているwindow.onloadを他に設定していますか? – epascarello

答えて

2

あなたは常にjQueryの

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 

<script type="text/javascript"> 
     $(document).ready(function() { 
      setClasses(); 
     }); 
</script> 

編集

例jQueryのイベントリファクタリング使用することもできます。このコードは、あなたのページに表示されない

$(".gchoice_35_0").click(function(){ 
    //Handler Code... 
}); 
+0

JQueryは非常に良い解決策ですが、setClassesメソッドでJqueryイベント処理を表示することで答えを詳述できますか?私はそれがあなたの答えにいくらかの価値を加えるだろうと思う。 – Zoidberg

+0

優れたAPIリファレンス:http://api.jquery.com/click/ –

1

私はそれを使用するかを気軽に、YUIを使用して答えを与えるつもりですが、私はフレームワークがあると思いますjavascript開発のスピードアップに役立つ良いアイデアです。 (これはIE、驚き驚きで風変わりなことができるため)ので、その後に行う、window.onload = someFnの代わりに

<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/yahoo-dom-event/yahoo-dom-event.js"></script> 

次に、あなたのページに次の

YAHOO.util.Event.onDOMReady(function() { 
    setClasses(); 
}); 

の中に次を追加するには、クラスを関数に設定するには、次のようにします。

function setClasses(){ 
     YAHOO.util.Event.on(document.getElementsByClassName("gchoice_35_0")[0], 'click', sedanShow); 
     YAHOO.util.Event.on(document.getElementsByClassName("gchoice_22_0")[0], 'click', sedanShow); 
     YAHOO.util.Event.on(document.getElementsByClassName("gchoice_34_0")[0], 'click', sedanShow); 

     YAHOO.util.Event.on(document.getElementsByClassName("gchoice_34_1")[0], 'click', suvShow); 
     YAHOO.util.Event.on(document.getElementsByClassName("gchoice_35_1")[0], 'click', suvShow); 
     YAHOO.util.Event.on(document.getElementsByClassName("gchoice_22_1")[0], 'click', suvShow); 

     YAHOO.util.Event.on(document.getElementsByClassName("gchoice_22_2")[0], 'click', vanShow); 
     YAHOO.util.Event.on(document.getElementsByClassName("gchoice_35_2")[0], 'click', vanShow); 
     YAHOO.util.Event.on(document.getElementsByClassName("gchoice_34_2")[0], 'click', vanShow); 
    } 

これはすべきことです。