[JS] Gedeelte uit string filteren

[kleautviool]

Ik heb voor mijn site een tab-menu gemaakt waarbij bij elke klik gekeken wordt welk gedeelte weergegeven moet worden. Hiervoor heb ik het volgende gemaakt:

code:

function _handleClick(to){
  item = to.replace('menu-',''), startNode = document.getElementsByTagName('ul').item(0);
  document.images['logo'].src = "/Lay/Logo-"+logoSwitch[item]+".jpg";
  document.getElementsByTagName('h1')[0].style.color = "#"+styleSwitch[item];
  for(j=0; j<startNode.childNodes.length; j++){
    var node = startNode.childNodes.item(j);
    if(node.nodeName == "LI"){
      el = node.getAttribute("id").replace("menu-","");
      document.getElementById(el).style.display = "none";
      document.getElementById(item).style.display = "block";
    }
  }
}

Mijn HTML ziet er grofweg zo uit

code:

<div id="pageContainer">
    <h1>Personal Portfolio</h1>

    <div id="menu">
        <p><img src="/Lay/Logo-Green.jpg" id="logo" alt="Logo" title="Logo"></p>
        <ul id="nav">
            <li id="menu-info" class="active"><a href="#" onclick="_handleClick(this.parentNode.getAttribute('id'))">Info</a></li>
            <li id="menu-id"><a href="#" onclick="_handleClick(this.parentNode.getAttribute('id'))">ID</a></li>
            <li id="menu-print"><a href="#" onclick="_handleClick(this.parentNode.getAttribute('id'))">Print</a></li>
            <li id="menu-web"><a href="#" onclick="_handleClick(this.parentNode.getAttribute('id'))">Web</a></li>
            <li id="menu-contact"><a href="#" onclick="_handleClick(this.parentNode.getAttribute('id'))">Contact</a></li>
            </ul>
        </div>

    <div class="container" id="info">
        <h2>Informatie</h2>
        <p>Text</p>
        </div>

    <div class="container" id="id">
        <h2>ID</h2>
        <p>Text>
        </div>

    <div class="container" id="print">
        <h2>Print</h2>
        <p>Text</p>
        </div>

    <div class="container" id="web">
        <h2>Web</h2>
        <p>Text</p>
        </div>

    <div class="container" id="contact">
        <h2>Contact</h2>
        <p>Text</p>
        </div>

    </div>

Dit werkt allemaal prima in Firefox, maar als ik dit in IE (de nieuwste versie) probeer werkt het menu niet. Als ik in Firefox naar mijn Javascript error check kijk, zie ik dit:

Error: document.getElementById(el) is null
Source File: /JS/init.js
Line: 25

Ik heb echter geen idee wat hier nu mis gaat. Is er iemand die het wel ziet?

[ Voor 4% gewijzigd door kleautviool op 24-04-2015 17:10 ]

[XWB]

nodeName bestaat sowieso niet in IE.

De foutmelding in Firefox komt vast door whitespace.

[Borizz]

Wat heb je zelf al geprobeerd om het op te lossen? Je javascript code al gedebugged?

De foutmelding in firefox geeft heel duidelijk aan wat er misgaat, namelijk "document.getElementById(el) is null". Wellicht dat de variable "el" een id bevat die in de HTML DOM niet is terug te vinden?

Daarnaast kan je om problemen te voorkomen beter de volgende code gebruiken om de LI elementen in een UL element op te halen. Dan hoef je ook niet te controleren of de nodeName / tagName gelijk is aan LI.

JavaScript:

startNode.getElementsByTagName('li');

[ Voor 31% gewijzigd door Borizz op 08-11-2009 19:09 ]

[crisp]

Hacku schreef op zondag 08 november 2009 @ 15:24:
nodeName bestaat sowieso niet in IE.

Que?

[kleautviool]

Wat ik nu zo vreemd vind is dat het in Firefox wel werkt. IK krijg die error wel, maar ik kan gewoon leuk heen en weer klikken.

Ik heb logisch nagedacht, en voor zover mijn logica toereikend is, zou het moeten werken. Ik zou zelf zo 1 2 3 niet weten hoe het dan aan te passen, vandaar dit topic.

Mijn logica:
Ik loop door alle child elementen van <ul>'s heen, vervolgens kijk ik of ik een list-item te pakken heb. Zoja dan vraag ik het ID attribuut op, haal hier het gedeelte van 'menu-' vanaf en zet die op display:none

Mijn logica zegt: dit werkt
IE zegt: dit werkt niet

Ik snap niet waarom dit nu niet in IE werkt...

Wat betreft het beginnen met startNode.getElementsByTagName('li') kan inderdaad, maar daar zit de fout niet in

[ Voor 8% gewijzigd door kleautviool op 09-11-2009 21:25 ]

[crisp]

Blijkbaar is 'item' iets speciaals in de global scope van IE, maak je variabele 'item' eens local in je functie...

Overigens is je script niet echt efficient te noemen met zoveel lookups en iteraties over de DOM bij een onclick...

[NetForce1]

Zo op het eerste gezicht lijkt het me wel te moeten werken, maar je script zou wel wat fraaier kunnen (zonder getElementsByTagName). Je kunt bijv. _handleClick(this) aanroepen, en dan in die methode het id van de parent ophalen. Waarom pak je het eerste ul-element en niet gewoon het element met id 'menu'?
Het lijkt me ook handiger om het vorige item bij te houden (of alleen het id), en dat te hiden. Het te tonen item kun je ook het id van generen, dat kun je dan tonen, dan hoef je niet al je containers langs.

edit:
Volgens mij heb ik het probleem gevonden. Je hebt twee items in je menu die geen corresponderende container hebben op je pagina (cv en travel), als je de loop weghaalt die itereerd over de children van menu zou dit ook meteen opgelost moeten zijn.

[ Voor 20% gewijzigd door NetForce1 op 09-11-2009 21:54 ]

[XWB]

crisp schreef op maandag 09 november 2009 @ 09:36:
[...]

Que?

Ben ik in de war met tagName?

[Joolee]

Heb je al gekeken wat voor error je precies krijgt in IE? Er zit tegenwoordig een slap aftreksel van Firebug en consorten in waarmee je redelijk kan debuggen.

[RobIII]

Hacku schreef op maandag 09 november 2009 @ 21:39:
[...]


Ben ik in de war met tagName?

Scroll dan gewoon effe naar beneden in de linker pane... tagName.