[js] document.getElementById accepteert geen variables? - Softwareontwikkeling

donderdag 21 april 2005 22:03

Acties:

Verwijderd

Topicstarter

Dit lijkt wellicht iets heel simpels, maar ik zie echt niet waar het probleem ligt.
Goed, om bij het begin te beginnen: de bedoeling is navigatie voor een site in elkaar te zetten. 3 'pagina's' in totaal. Pagina's tussen aanhalingstekens, omdat het in werkelijkheid geen losse pagina's zijn, maar 3 verschillende div's, welke met behulp van js tevoorschijn worden getoverd of worden verborgen.
De eerste, "news" (de voorpagina van de site), is standaard uiteraard zichtbaar (<div id="news" style="display: block;">). De andere 2 zijn standaard verborgen (... style="display: none;">).

In de <head> sectie van de desbetreffende pagina het volgende stukje javascript:

code:

1	sections = new Array("news", "band", "releases");

Het navigatiemenu ziet er als volgt uit:

code:

<div id="navigation">
    <span onclick="elementretr_('news','s1');" id="s1">Frontpage (news)</a><br/>
    <span onclick="elementretr_('band','s2');" id="s2">Band</a><br/>
    <span onclick="elementretr_('releases','s3');" id="s3">Releases</a><br/>
</div>

In het externe javascript:

code:

function elementretr_(element, option, release) {
if (!release) {
    for (a = 0; a < sections.length; a++) {
        document.getElementById(sections[a]).style.display = "none";
    }
    document.getElementById(element).style.display = "block";
} else { hideclass('release');
    document.getElementById(release).style.display = "block"; }
}

Let niet op de 'release' variabele, deze is hier niet van toepassing.

De bedoeling is dat de 'for' loop de 3 divs (pagina's) verbergt. De regel na de 'for' loop zou er vervolgens voor moeten zorgen dat de door gebruiker opgevraagde 'pagina' (div dus) weer zichtbaar word gemaakt.

Het (mijns inziens) vreemde probleem: de for loop en de daarop volgende regel werken niet samen! Als ik de regel voor het zichtbaar maken van een pagina weg laat, en dus alleen de for loop over blijft, worden alle 3 de divs netjes verborgen. Zet ik de zojuist genoemde regel er weer bij, dan gebeurd er he-le-maal niets (ik vermoed dat de for loop de 3 divs wel verbergt, maar de daarop volgende regel onterecht weer de voorpagina ("news") tevoorschijn tovert. WAAROM?! Het stomme is namelijk dat als ik op de plaats van de regel voor het tonen van een pagina, een document.write(element); neer plant, deze wel netjes de juiste waarde laat zien (dus 'news' indien ik in het menu op 'Frontpage (news)' klik, 'band' als ik op 'Band' klik, etc.).
Nog zoiets raars: als ik de for loop weg haal, en dus alleen de ene regel voor het tonen van een div laat staan, en dan in het navigatiemenu op 'Releases' klik, zowel de 'band' als 'releases' div tevoorschijn komen?

Tot slot: als ik i.p.v. de variable 'element' in dat ene regeltje, gewoon ...

code:

1	document.getElementById("releases").style.display = "block";

... neerzet, puur om te testen, dan doet 'ie het wel goed.

Het lijkt wel alsof de inhoud van de variabele gewoon niet goed word doorgegeven.

Begrijp ik nu geen f.. van javascript, doe ik iets fout, of ... ?

(eenzelfde constructie pas ik overigens ook ergens anders in de pagina/het script toe, en dat doet het uitstekend).

Getest in Firefox 1.0.3 en Internet Explorer 6 overigens ...

[ Voor 12% gewijzigd door Verwijderd op 21-04-2005 22:07 ]

donderdag 21 april 2005 22:10

Acties:

Verwijderd

maak van de variabele element eens iets anders, da's een reserved word

[ Voor 171% gewijzigd door Verwijderd op 21-04-2005 22:17 ]

donderdag 21 april 2005 22:12

Acties:

Verwijderd

Topicstarter

Verwijderd schreef op donderdag 21 april 2005 @ 22:10:
maak van de variabele element eens iets anders, da's een reserved word

heb ik geprobeerd, haalt niets uit ...

[ Voor 102% gewijzigd door Verwijderd op 21-04-2005 22:24 ]

donderdag 21 april 2005 22:35

Acties:

faabman

probeer anders eens

JavaScript:

function elementretr_(element, option, release) {
if (!release) {
    for (a = 0; a < sections.length; a++) {
        document.getElementById( ( sections[a] ) ).style.display = "none";
    }
    document.getElementById(element).style.display = "block";
} else { hideclass('release');
    document.getElementById(release).style.display = "block"; }
}

Op zoek naar een baan als Coldfusion webdeveloper? Mail me!

donderdag 21 april 2005 22:49

Acties:

Verwijderd

Topicstarter

faabman schreef op donderdag 21 april 2005 @ 22:35:
probeer anders eens ...

Het enige verschil is dat extra paar haakjes om 'sections[a]' in "document.getElementById(sections[a]).style.display = "none";"? Dat is het niet, doet hetzelfde.

donderdag 21 april 2005 23:06

Acties:

faabman

Heb maar even voor je getest, nu werkt het wel...

hier staat mijn testcase

Denk dat het probleem niet zozeer lag in je javascript, maar eerder in je html... Een span afsluiten met een anchor werkt meestal niet

Op zoek naar een baan als Coldfusion webdeveloper? Mail me!

donderdag 21 april 2005 23:15

Acties:

Verwijderd

Topicstarter

faabman schreef op donderdag 21 april 2005 @ 23:06:
Heb maar even voor je getest, nu werkt het wel...

hier staat mijn testcase

Denk dat het probleem niet zozeer lag in je javascript, maar eerder in je html... Een span afsluiten met een anchor werkt meestal niet

.. ik heb vandaag veel veranderingen doorgevoerd in de site, waaronder het veranderen van de links in het menu .. waarbij ik dus blijkbaar de tags correct vergat af te sluiten. foutje ...

Bedankt.