Javascript fout in IE7, niet in FF3

[Verwijderd]

Ik maak gebruik van een zelfgemaakt 'tabbladen' systeem, nu hebben actieve en non-actieve tabs een eigen css class. Ik heb in javascript iets gemaakt dat de classen gaat wisselen.

Nu krijg ik in IE7 een fout 'null' is leeg of is geen object op regel 16 teken 4.

Het script doet wel wat het moet doen, in IE7 ook.

JavaScript: tabs.js

function changeTab(name,tab) {
    var inhoud = document.getElementById("tabbladInhoud" + name);
    var tabClick = document.getElementById("tab" + name + tab);

    var i = 1;
        var varName = "tab" + name + i; 
    while (typeof varName != "undefined") {
        var varName = "tab" + name + i; 
        var tabNew = document.getElementById(varName);
        
        if (i == tab) {
            tabClick.className = "tabActive";
        }
        else {
            tabNew.className = "tab";
        }
        i++;
                var varName = "tab" + name + i; 
        
    }

}

Omdat alle tabbladen in de html een volgnummer krijgen heb ik de typeof varName != "undefined" gebruikt om te zien hoeveel tabbladen op 'non-actief' moeten geplaatst worden.

HTML: users.tpl

<script type="text/javascript" src="scripts/tabs.js"></script>

<div id="tabbladenUser">
    <div id="tabUser1" class="tabActive" onclick="changeTab('User','1');"><p class="tabblad">Gebruiker</p></div>
    <div id="tabUser2" class="tab" onclick="changeTab('User','2');"><p class="tabblad">Rechten</p></div>
    <div id="tabUser3" class="tab" onclick="changeTab('User','3');"><p class="tabblad">Geschiedenis</p></div>
    <div class="tabbladInhoud" id="tabbladInhoudUser">
        test
    </div>
</div>
<div style="height: 50px;"></div>

Het script werkt dus wel degelijk, ook met de fout, maar ik kan moeilijk een site met fouten online laten,toch

[CoolGamer]

JavaScript:

    while (typeof varName != "undefined") {
        var varName = "tab" + name + i;     

Probleempje met de scope van varName, dat is een fout die ik er in zie. Dat zou de fout kunnen veroorzaken.

EDIT: Naja, dat lijkt niet de fout te veroorzaken volgens mij, maar het lijkt mij sterk dat dit naar behoren werkt, tenzij je varName ergens anders ook instelt.

typeof varName != "undefined" is volgens mij altijd undefined, en op het moment dat hij niet undefined is krijg je een oneindige loop, want het type van varName zal niet veranderen.

Anders moet je de code eens doorlopen met een javascript-debugger.

[ Voor 57% gewijzigd door CoolGamer op 07-04-2009 22:39 ]

[Verwijderd]

Ja heb de code niet helemaal geplaatst zoals ze oorspronkelijk was, kwam door het zelf proberen te debuggen, heb ze nu even geëdit naar de orginele code.

Ik ga eens een javascript-debugger zoeken.

edit:
Error ``tabNew is null'' [x-] in file ``http://www.dolceitalia.be/cms/scripts/tabs.js'', line 15, character 0.

krijg ik terug van de debugger van Firefox.

Nu heb ik een alert(i); toegevoegd in de while loop, hij doorloopt de loop dus 4 keer, waarbij dus de vierde keer tabNew leeg is.

Nu nog uitzoeken hoe het komt dat hij de lus 4 keer doorloopt, de bedoeling van de lus was als het object niet meer bestond dat hij ze ook niet meer zou doorlopen.

/me gaat zoeken

[ Voor 56% gewijzigd door Verwijderd op 07-04-2009 23:09 ]

[CoolGamer]

Nu je de originele code hebt geplaatst zie ik de fout. varName is ten alle tijden een string, dus nooit undefined. Dit maakt de while-loop in je code oneindig. Tijdens elke loop verhoog je i met 1. Zodra die bij 4 aankomt krijg je de fout en het lijkt me sterk dat firefox hier geen error bij geeft. Heb je al in het console van Firefox gekeken?

JavaScript:

var tabNew = document.getElementById(varName)

geeft dan null bij i=4 en dan geeft

JavaScript:

tabNew.className = "tab"; 

de error die jij beschrijft.

Edit:

Verwijderd schreef op dinsdag 07 april 2009 @ 22:56:

edit:
Error ``tabNew is null'' [x-] in file ``http://www.dolceitalia.be/cms/scripts/tabs.js'', line 15, character 0.

krijg ik terug van de debugger van Firefox.

Nu heb ik een alert(i); toegevoegd in de while loop, hij doorloopt de loop dus 4 keer, waarbij dus de vierde keer tabNew leeg is.

Nu nog uitzoeken hoe het komt dat hij de lus 4 keer doorloopt, de bedoeling van de lus was als het object niet meer bestond dat hij ze ook niet meer zou doorlopen.

/me gaat zoeken

Die while-lus is dus oneindig. Je moet naar de waarde van tabNew kijken en niet naar varName.

[ Voor 40% gewijzigd door CoolGamer op 07-04-2009 23:15 . Reden: Reactie op edit ]

[Verwijderd]

Ja inderdaad.

Ik heb het opgelost, heb een andere manier genomen om te controleren of een object bestaat

JavaScript: tabs.js

function changeTab(name,tab) {
    var inhoud = document.getElementById("tabbladInhoud" + name);
    var tabClick = document.getElementById("tab" + name + tab);

    var i = 1;
    var varName = "tab" + name + i;   
    while (document.getElementById(varName) == "[object]") {
        var varName = "tab" + name + i;    
        var tabNew = document.getElementById(varName);
        if (i == tab) {
            tabClick.className = "tabActive";
        }
        else {
            tabNew.className = "tab";
        }
        i++;
        //alert (document.getElementById(varName));
        var varName = "tab" + name + i;    
        
    }

}

Of is er een betere manier om dit te controleren die ik over het hoofd zie?

[Verwijderd]

Bovenstaande werkt niet in firefox, aangezien IE7 "[object]" geeft, en FF3 "[object HTMLDivElement]"

Iemand een andere oplossing toevallig?

[CoolGamer]

== "[object]" vervangen door != null.

[Verwijderd]

Had ik ook al geprobeerd, maar dan loopt hij weer 4 keer door de lus

En alle browsers gaan hardcoden (document.getElementById(varName) != "[object]" || document.getElementById(varName) == "[object HTMLDivElement]") zie ik ook niet zitten

[ Voor 60% gewijzigd door Verwijderd op 07-04-2009 23:55 ]

[CoolGamer]

== "[object]" compleet weglaten kan ook. Werkt misschien beter dan, al werkt != null wel bij mij in zowel IE8 als FF.

[Verwijderd]

niet aan gedacht, werkt perfect!

thx!