[Javascript] DOM geeft oneindige LOOP

[JoostMartijn]

Beste Tweakers,

Ik ben bezig met een javascript LOOP die alle DOM objecten gaat schalen. Het moet zo worden dat 1 funcite een heel deel van de HTML gaat schalen. Nu heb ik een probleem met een vergelijking die zichzelf aan moet roepen. Deze gaat oneindig draaien. childNodes.length wordt op een gegeven moment altijd 1.

code:

if(document.getElementById(DivID).childNodes[i].childNodes.length > 0){
                //Zelf aanroepen! Het subObject wat aangeroepen gaat worden naam ID geven!
    div_nummer = div_nummer + 1;
    nieuwObjectNaamTemp = div_naam + div_nummer;
    document.getElementById(DivID).childNodes[i].id = nieuwObjectNaamTemp;
    schaalObjectenByDiv(nieuwObjectNaamTemp,maximaal,div_nummer);
}

Van deze vergelijk is het de bedoeling dat als het object childern heeft dat de functie opnieuw wordt aangeroepen op het dat child. Op een gegeven childNodes.length altijd 1 en dan herhaalt de functie zich oneindig. Dit gebeurt volgens mij voornamelijk op td & div objecten!

Heeft iemand een idee wat ik hier fout doen ?

[JoostMartijn]

de variabele i uit de vergelijking komt uit de loop. Die zorgt er voor dat alle childern geschaald worden

[crisp]

Is i een global of een local variabele?
Je weet dat je hiermee ook over textNodes loopt (die dus geen childNodes hebben) en dat er een verschil bestaat in hoe standards-compliant browsers en IE omgaan met whitespace in de DOM?
Wellicht moet je iets doen met hasChildNodes() of de nodeType afvragen (1 = elementNode).

[JoostMartijn]

i is een local variabele. TextNodes en andere objecten die verder niet geschaald hoeven worden worden overgeslagen! Zoals ik het nu heb werkt het in elke browser. Het is alleen nog de bovenstaande code. Daar gaat is mis zodat de loop oneindig gaat loopen

[crisp]

Heb je een online voorbeeld ergens met complete code?

[JoostMartijn]

De code staat gewoon in het bestand. De complete code en uitwerking is te vinden op

http://demo.opafstand.com/arjan4.php

[crisp]

JavaScript:

for(i = 0; i < aantal; i++){

i is hier zeker niet local maar global aangezien je 'm niet expliciet declareerd.

Verder is je code nodeloos complex en bevat veel onnodige zaken zoals:

JavaScript:

//Div schalen per browser verschillend

waarom? alle moderne browsers ondersteunen DOM (note dat je wel een unit moet opgeven achter een width of height CSS property)

JavaScript:

nieuwObjectNaamTemp = recall(nieuwObjectNaamTemp,maximaal,div_nummer);

waarom roep je niet meteen schaalObjectenByDiv hier aan? (note overigens dat een iteratieve methode om door je DOM heen te lopen vele malen sneller is)

JavaScript:

document.getElementById(DivID).childNodes[i].width

er zijn maar weinig elementen die een width property hebben

JavaScript:

.nodeName == "#text"

je kan beter naar nodeType kijken

ook doe je ook overal opniew lookups naar dezelfde elementen, en dat is bijzonder kostbaar.

En last but not least: wat probeer je precies te bereiken? Je weet dat het ook mogelijk is om een alternatieve stylesheet toe te passen voor print?

[JoostMartijn]

Bedankt voor je reactie . Veel van die onnodige dingen staan er nu in omdat het toch al niet 100% werkte. De code moet nog netter gemaakt worden en alleen de mooie dingen er in zetten.

Het probleem bij een alternatief stylesheet is volgens mij dat als er hard een waarde is geset in een tag dat deze geldig blijft. Dit past geen stylesheet aan. En als er elementen in elementen staan worden deze niet volledig bijgeschaald!

[JoostMartijn]

Maar ik weet ook al waarom het niet 100% werkt. Het komt omdat als je een javascript funtie aan spreekt binnen een functie dat deze 'Hoofd' functie niet meer door gaat. Zoals te zien in dit voorbeeld

code:

function loopen(van,raar){
     var waarde = 20;
     for(i = van; i <= waarde; i++){
    document.write("Joost heeft een loop "+i+"<br>");
    if(raar == true && i == 5){
                     functies = loopen2(10,false);
    }
     }
}

function loopen2(van,raar){
    var waarde = 20;
    for(i = van; i <= waarde; i++){
    document.write("Joost heeft een loop "+i+"<br>");
    if(raar == true && i == 1){
           loopen(10,false);
    }
    }
}

Heeft iemand hier nog een oplossing voor?

[user109731]

Zoals crisp hierboven al aangeeft zit er een verschil tussen 'var i=van' en 'i=van'. Je moet de eerste hebben, anders gaat het in beide functies om dezelfde i zeg maar.

[crisp]

JoostMartijn schreef op zaterdag 07 oktober 2006 @ 22:43:
Het probleem bij een alternatief stylesheet is volgens mij dat als er hard een waarde is geset in een tag dat deze geldig blijft. Dit past geen stylesheet aan. En als er elementen in elementen staan worden deze niet volledig bijgeschaald!

Nope, een CSS rule gaat altijd voor op een HTML attribuut waarde.
Uitzondering is style="" in HTML, maar als je dat hebt dan doe je iets fout want dat hoort dan in je stylesheet

[JoostMartijn]

Grote prutser schreef op zaterdag 07 oktober 2006 @ 23:03:
Zoals crisp hierboven al aangeeft zit er een verschil tussen 'var i=van' en 'i=van'. Je moet de eerste hebben, anders gaat het in beide functies om dezelfde i zeg maar.

Ja, hier zat inderdaad het grootste probleem. Bedankt voor je reactie.

**** Crisp ****

Ik heb jouw ideeën ook zitten testen en inderdaad je hebt gelijk Bedankt voor je hulp