[js] JavaScript error waar ik niet uit kom

[anoniem]

Ik heb dit script: [code:1:db0c948035]function navbar(content) { var ie4=document.all&&navigator.userAgent.indexOf("Opera")==-1; var ns6=document.getElementById&&navigator.userAgent.indexOf("Opera")==-1; var ns4=document.layers; if(ie4) { navbar1Obj=document.all.navbar_div1; navbar2Obj=document.all.navbar_div2; } if(ns6) { navbar1Obj=document.getElementById("navbar_div1"); navbar2Obj=document.getElementById("navbar_div2"); } if(ie4||ns6) { if(navbar1Obj.innerHTML!=content || navbar2Obj.innerHTML!=content) { navbar1Obj.innerHTML=content; navbar2Obj.innerHTML=content; } else { navbar1Obj.innerHTML=""; navbar2Obj.innerHTML=""; } } if(ns4) { document.navbar_lyr1.document.write(content); document.navbar_lyr1.document.close(); document.navbar_lyr2.document.write(content); document.navbar_lyr2.document.close(); } }[/code:1:db0c948035] En dit als HTML: [code:1:db0c948035]<layer id="navbar_lyr1"></layer><div id="navbar_div1"></div> (...) <layer id="navbar_lyr2"></layer><div id="navbar_div2"></div>[/code:1:db0c948035] En zowel IE als Mozilla zeuren over deze fout: [quote:db0c948035]Error: navbar2Obj has no properties Source File: http://localhost/mosymuis/script.js Line: 153[/quote:db0c948035] Wat zie ik over het hoofd? :wink: //edit Regel 153 is: [code:1:db0c948035] navbar2Obj.innerHTML=content; [/code:1:db0c948035]

[anoniem]

Heb je toevallig ook een compleet voorbeeld online staan. De code an sich kan ik niets raars in terugvinden namelijk. Het lijkt dus veroorzaakt te worden door iets anders dan wat je hier hebt geplaatst. Iets waar je al zelf naar zou kunnen kijken:[list:a1df5061f5][*:a1df5061f5]wordt de functie navbar aangeroepen voor de pagina geparsed is (dus voor de objecten bestaan)?[*:a1df5061f5]zijn er andere functies die de [i:a1df5061f5]navbar_div[/i:a1df5061f5]'s (per ongeluk) overschrijven?[/list:u:a1df5061f5]

[anoniem]

Bedankt voor je reactie! :) Ik heb een gestripte versie hier online geplaatst, de error is nog steeds aanwezig: http://edit.mosymuis.nl/js_probleem_1.html En nu heb ik ook pagina's met maar één inhouds balk, deze geeft zelfs bij elke hover nieuwe errors. Dat is op zich logisch aangezien navbar2Obj er dan ook echt niet is, maar hoe kan ik binnen dezelfde functie laten vooraf controleren of navbar2Obj bestaat, zodat de bezoekers geen errors krijgt? Een tweede functie maken is geen optie. :( http://edit.mosymuis.nl/js_probleem_2.html

[anoniem]

Waarom sloop je niet alle oude code eruit en gebruik je alleen wat DOM compliant JS erin? (IE4/NN4 wordt toch niet meer gebruikt en het DOM wordt ondersteund door elke browser die daarna uitkwam.)

[anoniem]

Klinkt schitterend, maar dit is niet mijn script; ik heb het met veel moeite gevonden. PHP lukt me prima, maar JavaScript ken ik niet. Weet jij toevallig een adres waar ik een dergelijk script kan vinden? :wink:

[anoniem]

Je eerste probleem wordt inderdaad veroorzaakt doordat je de functie aanroept voordat navbar2 bestaat. Deze is dus makkerlijk op te lossen door simpelweg de aanroepen met navbar('standaard tekst') te verwijderen en de volgende regel aan je javascript toe te voegen: [code:1:0d7f7353b8] window.onload = function () { navbar('standaard tekst'); } [/code:1:0d7f7353b8] Het andere probleem is eigenlijk alleen maar op te lossen door je functies anders in te delen en deze afhankelijk van het aantal navigatie onderdelen aan te roepen. Dus minder zaken bundelen in de navbar functie. Maak losse functies voor het opvragen van een layer object en het schrijven in een layer object. Als je dat doet hoef je ook niet meer zoveel code te kopieren voor een andere functie. Pseudo code (voorbeelden zijn er genoeg te vinden op internet, bijv: KLayers) [code:1:0d7f7353b8] function getBrowser // return browser function getLayer(layerId) // bepaal browser // bepaal object adhv browser // return layerobject; function writeLayer(layerobject, content) // bepaal browser // schrijf content naar layerobject adhv browser [/code:1:0d7f7353b8] En zo kan je voor de twee verschillende pagina's je navbar functie samenstellen uit bovenstaande functies. Bijvoorbeeld voor je pagina met 2 navigatie onderdelen: [code:1:0d7f7353b8] function navbar(content) { var navbar1Obj = getLayer('navbar_div1'); var navbar2Obj = getLayer('navbar_div2'); writeLayer(navbar1Obj, content); writeLayer(navbar2Obj, content); } [/code:1:0d7f7353b8] Een tweede optie is door het schrijven naar de objecten te omsluiten in een try-catch. Mocht het dan fout gaan dan zal je script in ieder geval geen foutmelding geven. Maar persoonlijk heeft deze oplossing niet mijn voorkeur. [code:1:0d7f7353b8] try { // navbar1 code // navbar2 code } catch(e) { /* doe niets */ } [/code:1:0d7f7353b8] ps. als je geen ondersteuning nodig hebt voor oude browsers dan ben ik het met Anne eens dat je beter kan kijken naar DOM scripting. Voor voorbeelden en uitleg: http://www.quirksmode.org/dom/

[anoniem]

Annie, ik had even zin om er mee te spelen:[code:1:823ef9fd25]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="nl"> <head> <title>Werkt prima.</title> <script type="text/javascript"> function navbar(content){ navbar1Obj=document.getElementById("testdiv"); if(testdiv.nodeValue!=content){ blaat = document.createTextNode(content); testdiv.appendChild(blaat); }else{ testdiv.removeChild(blaat); } } </script> <style type="text/css"> div{ margin:1em; cursor:pointer; } </style> </head> <body> <div onmouseover="navbar('tekst 1');" onmouseout="navbar('standaard tekst');">tekst 1</div> <div onmouseover="navbar('tekst 2');" onmouseout="navbar('standaard tekst');">tekst 2</div> <div id="testdiv"><script type="text/javascript">navbar('standaard tekst');</script></div> <div onmouseover="navbar('tekst 3');" onmouseout="navbar('standaard tekst');">tekst 3</div> <div onmouseover="navbar('tekst 4');" onmouseout="navbar('standaard tekst');">tekst 4</div> </body> </html>[/code:1:823ef9fd25]Kun jij misschien even de "finishing touch" geven (scriptrequest, inderdaad (8) )? Edit: volgens mij moet ik er een spannetje instoppen oid, zodat ik heb later weer makkelijk kan loceren en verwijderen, niet?

[anoniem]

Zoiets? (heb je ook geen spannetje nodig) [code:1:ae2971c44b] <script type="text/javascript"> function navbar(content) { var testdiv = document.getElementById("testdiv"); var tekstje = document.createTextNode(content); if (testdiv.hasChildNodes()) { if (testdiv.firstChild.nodeValue != content) { testdiv.replaceChild(tekstje, testdiv.firstChild); } else { testdiv.firstChild.nodeValue = ""; } } else { testdiv.appendChild(tekstje); } } </script> [/code:1:ae2971c44b]

[anoniem]

Ding hierboven gemist :). Werkt prima inderdaad! Zover was ik nog gekomen, ik kreeg de 'innerHTML' niet weg:[code:1:8cf94f14d3] function navbar(content){ var testdiv = document.getElementById("testdiv"); if(testdiv.nodeValue!=content){ testdiv.innerHTML=""; var blaat = document.createTextNode(content); testdiv.appendChild(blaat); } }[/code:1:8cf94f14d3]Daarnaast had ik het SCRIPT element verwijderd en vervangen voor een ONLOAD attribuut in het BODY element.

[anoniem]

Het net geschreven script wil bij mij niet werken met twee variabele tekst balkjes. :( [quote:1ee6111122="Annie"]Je eerste probleem wordt inderdaad veroorzaakt doordat je de functie aanroept voordat navbar2 bestaat.[/quote:1ee6111122] Je hebt gelijk, dat probleem is er nu uit! Kwestie van de eerste aanroep te verwijderen, na het tweede balkje staat hij er immers nog een keer. [quote:1ee6111122="Annie"]Het andere probleem is eigenlijk alleen maar op te lossen door je functies anders in te delen en deze afhankelijk van het aantal navigatie onderdelen aan te roepen. Dus minder zaken bundelen in de navbar functie.[/quote:1ee6111122] Klinkt leuk, maar ik zou niet weten hoe ik dit maak. [quote:1ee6111122="Annie"]Een tweede optie is door het schrijven naar de objecten te omsluiten in een try-catch. Mocht het dan fout gaan dan zal je script in ieder geval geen foutmelding geven.[/quote:1ee6111122] Ik heb dit geprobeerd zoals [url=http://www.devguru.com/Technologies/ecmascript/quickref/try...catch.html][u:1ee6111122]hier[/u:1ee6111122][/url] staat uitgelegd, maar ik krijg het niet werkend. :-/ Mozilla blijft maar zeuren om navbar2Obj, terwijl deze nergens genoemd wordt in de catch(). Wat ik eigelijk nodig heb is een kleine if() die controleert of navbar2 aanwezig is, en al dan niet verwijst ernaar. Zoals je dat in PHP zou controlen bij het includen van een file: [code:1:1ee6111122]if (file_exists(file.php)) include("file.php");[/code:1:1ee6111122]

[anoniem]

Ik heb mijn tweede probleem nu ook opgelost, zonder javascript tweaks. ;) [code:1:5701d97ca4]<layer id="navbar_lyr2"></layer><div id="navbar_div2" style="display:none;"></div>[/code:1:5701d97ca4] Dat heb ik nu in elke pagina staan waar ik 1 balkje heb, zo vind hij navbar_div2 wel, maar ziet de bezoeker hem niet. :) Toch nog bedankt voor de reacties. (y)

[anoniem]

[quote:095e05d188="mosymuis"]Ik heb dit geprobeerd zoals [url=http://www.devguru.com/Technologies/ecmascript/quickref/try...catch.html][u:095e05d188]hier[/u:095e05d188][/url] staat uitgelegd, maar ik krijg het niet werkend. :-/ Mozilla blijft maar zeuren om navbar2Obj, terwijl deze nergens genoemd wordt in de catch(). [/quote:095e05d188] Zo zou het er dan uit moeten zien. [code:1:095e05d188] if(ie4||ns6) { try { if(navbar1Obj.innerHTML!=content || navbar2Obj.innerHTML!=content) { navbar1Obj.innerHTML=content; navbar2Obj.innerHTML=content; } else { navbar1Obj.innerHTML=""; navbar2Obj.innerHTML=""; } } catch(e) { /* doe niets */ } } [/code:1:095e05d188] [quote:095e05d188="mosymuis"] Wat ik eigelijk nodig heb is een kleine if() die controleert of navbar2 aanwezig is, en al dan niet verwijst ernaar. [/quote:095e05d188] Je kan controleren of het object niet null is [code:1:095e05d188] if (navbar2Obj != null) { // doe iets } [/code:1:095e05d188] Overigens lijkt het me nog steeds een aanrader om eens te kijken naar een meer generieke oplossing. Kijk eens naar de eerder genoemde KLayers wat een makkelijk te gebruiken crossbrowser lib is zonder al te veel toeters en bellen. Maakt je code meteen een stuk leesbaarder als je het opdeelt in meerdere functies. btw. layer tags zou ik sowieso meteen weglaten, die zijn nergens voor nodig. NS4 heeft geen enkel probleem met divs.

[anoniem]

Ik wil hier toch nog even op terugkomen, omdat mijn huidige script niets doet in Opera. Ik heb een Anne en Annie's script overgemomen en aangepast naar twee balken die hetzelfde zouden moeten wergeven bij een mouse hover over één van de links, maar dit werkt dus nog niet. http://edit.mosymuis.nl/js_probleem_1.html http://edit.mosymuis.nl/js_probleem_2.html Twee probeersels van me, allebei met een ander resultaat, maar natuurlijk nog niet hoe ik het wil hebben. :( Kunnen jullie me hier nog eens mee helpen?