2011-01-14 9 views
0

getElementByIdを使用しているJavaScriptに問題があります。 FF、Safari、Chromeではうまく動作しますが、IE(8 - 他のユーザーは試していません)がうまくいきます。getElementByIdにInternet Explorerのスローエラーが発生しました。

HTMLの該当ビットがtopnavと呼ばれるdiv要素である:私のJavaScriptで

<div id="topnav"> 
    ... some HTML ... 
    <div> 
    <div id="sub_1" class="lowernav"> 
    ... some HTML ... 
    </div> 
    <div id="sub_2" class="lowernav"> 
    ... some HTML ... 
    </div> 

、私はtopnavを見つけたいです。 (それはベイルどこまでの)完全なコードはこれです:

<script> 

window.onload = init(); 

function init() { 
    // Show current menu 
    showCurrentMenu(); 
} 

function showCurrentMenu() { 
    hideMenus(); // Hide all menus and then show the current one 
    topnav = document.getElementById('topnav'); 
    ... rest of code ... 
} 

function hideMenus() { 
    var divlist = document.getElementsByTagName('div'); 
    for(var ii=0; ii<divlist.length; ii++) { 
    if(divlist[ii].className != divlist[ii].className.replace('lowernav','')) { 
    divlist[ii].className += ' hidden'; 
    } 
    } 
} 

...それはまだ到達していないし、いくつかの他のコード...

私はここで何か間違ったことをやっていますか?それは本当に明白なものかもしれませんが、私の人生にとっては、私はそれを見ることができません!すべてのアドバイスは大歓迎です。

ETA:それが現在立っているよう[OK]を、ここでは全体のコードは、です:

<script> 
window.onload = init; 

function init() { 
    // Show current menu 
    showCurrentMenu; 
    // Attach 'onmouseover' event to main menu items 
    topnav = document.getElementById('topnav'); 
    // Get all items in list 
    var menulist = topnav.getElementsByTagName('a'); 
    for(var ii=0; ii<menulist.length; ii++) { 
    menulist[ii].onmouseover = showMenu; 
    } 

    document.getElementById('mainHomeNav').onmouseout = restoreMenu; 
} 

function restoreMenu(e) { 
    var targ; 
    if (!e) var e = window.event; 
    if (e.target) targ = e.target; 
    else if (e.srcElement) targ = e.srcElement; 
    if (targ.nodeType == 3) // defeat Safari bug 
     targ = targ.parentNode; 
    if (targ.id == "mainHomeNav") { 
    showCurrentMenu; 
    } 
} 

function hideMenus() { 
    var divlist = document.getElementsByTagName('div'); 
    for(var ii=0; ii<divlist.length; ii++) { 
    if(divlist[ii].className != divlist[ii].className.replace('lowernav','')) { 
    divlist[ii].className += ' hidden'; 
    } 
    } 
} 

function showCurrentMenu() { 
    hideMenus; 
    topnav = document.getElementById('topnav'); 
    // Get all items in list 
    var menulist = topnav.getElementsByTagName('a'); 
    for(var ii=0; ii<menulist.length; ii++) { 
    if(menulist[ii].className != menulist[ii].className.replace('thisSection','')) { 
    var thisid = menulist[ii].id; 
    var thissubmenu = document.getElementById(thisid + '_sub'); 
    thissubmenu.className = thissubmenu.className.replace(/hidden/g,''); 
    } 
    } 
} 

function showMenu() { 
    hideMenus; 
    // show this menu 
    var submenu_id = this.id + '_sub'; 
    var submenu = document.getElementById(submenu_id); 
    submenu.className = submenu.className.replace(/hidden/g,''); 
} 
</script> 

答えて

4

問題が

window.onload = init(); 

これはすぐにinit関数を呼び出し、次にように、その戻り値を使用しますですページのonload関数

window.onload = init; 

ページが完全にロードされた後にのみ、init関数を呼び出します。 window.onloadundefinedなり、何も返さないinitので

window.onload = init(); // this will CALL init() and assign the return value 

+0

+1正解です。簡単に間違いを作り、デバッグしようとすると見逃しやすい。 – Spudley

0

あなたの問題は、次の行にあります。

IEで動作しない理由は他のブラウザでは、他のブラウザがすでにDOMの一部を解析している可能性があり、したがってshowCurrentMenuの呼び出しが機能するからです。

しかし、それはちょうどだけでなく、あなたが実行してwindow.onloadに実際の関数参照を割り当てる必要があること解決するために、技術的な観点から文書がロードされることが保証されていないため、破損することがあり:

window.onload = init; 
+0

ありがとう、しかし私はそれを変更し、それでもエラーを与えています。 – Sharon

+0

@Sharonその後、私たちはコードをもっと見せなければなりません。今は他のエラーを出すことはできません。 –

+0

ありがとうIvo、私はポストを更新しました。 – Sharon

2

問題が見つかりました - 私は 'topmenu'の前に 'var'がありませんでした。

ので、代わりの

topnav = document.getElementById('topnav'); 

それは助けを

var topnav = document.getElementById('topnav'); 

みんなありがとうされている必要があります。

+0

のような良いJavaScriptチュートリアルを読むことを強くお勧めします。これは正しい答えです。 –

+0

何とかこれが私の問題を解決します.. –

関連する問題