Gå til innhold

[LØST] Problemer med getElementsByTagName

chriscandy

Av chriscandy
i Programmering og webutvikling

Anbefalte innlegg

chriscandy

chriscandy

Skrevet
Skrevet (endret)

Jeg har problemer med denne "trekkspill" snutten i Firefox. Den fungerer fint i IE7, men i FF får jeg bare feilmelding "thisNode is not a function". Har prøvd meg frem en del uten hell. Dette er mitt første forsøk på JS så vi nåde...

 

<script type="text/javascript">
function showOnly(catID) {
 var theCats = document.getElementById("theCategories");
 
 for(var i = 0; i < theCats.childNodes.length; i++) {
 	var thisNode = theCats.childNodes[i];
 	var titleDiv = thisNode.getElementsByTagName("DIV")[0];
 	var theParag = thisNode.getElementsByTagName("P")[0];
 	
 	if(thisNode.id != "category" + catID) {
   theParag.style.display = "none";
 	} else {
   theParag.style.display = "";
 	}
 }
}
</script>

 

Her er hvor jeg kaller på funksjonen.

 

<body>
<div id="theCategories">
   <div id="category1">
     <div class="titleBar" onclick="showOnly(1)">
       	Senior
     </div>
           <ul>
           	<li><a href="#">Link1</a></li>
               <li><a href="#">Link2</a></li>
               <li><a href="#">Link3</a></li>
               <li><a href="#">Link4</a></li>
           </ul>
   </div>
   	<div id="category2">
     <div class="titleBar" onclick="showOnly(2)">
       	Junior
     </div>
           <ul>
           	<li><a href="#">Link1</a></li>
               <li><a href="#">Link2</a></li>
               <li><a href="#">Link3</a></li>
               <li><a href="#">Link4</a></li>
           </ul>
   </div>
   	<div id="category3">
     <div class="titleBar" onclick="showOnly(3)">
       	Aldersbestemt
     </div>
           <ul>
           	<li><a href="#">Link1</a></li>
               <li><a href="#">Link2</a></li>
               <li><a href="#">Link3</a></li>
               <li><a href="#">Link4</a></li>
           </ul>
   </div>
</div>
</body>

 

Live demo

Endret av chriscandy
Lenke til kommentar

Videoannonse

Videoannonse
Annonse
luxus

luxus

Skrevet
Skrevet (endret)

IE og FireFox er ikke helt enige i hva som skal ligge i childNodes arrayet, så i IE ligger (kanskje mest naturlig ved første øyekast) bare HTML elementene DIV, UL osv, mens i firefox så får du også med noder for hvert linjeskift du har i HTML fila di.

 

Det betyr at childNodes gir: [Text-node element som inneholder "\n" (linjeskift), DIV elementet du vil ha ut, "\n" .. osv..]

 

Du må derfor sjekke om elementet du henter ut er text node, eller element node. Les mer om nodetyper her. Koden blir da:

 

[...]
var theCats = document.getElementById("theCategories");
for(var i = 0; i < theCats.childNodes.length; i++) {
 // Sjekker nodetype, vi vil bare ha med element noder, som er type 1
 // De andre hopper vi over
 if ( theCats.childNodes[i].nodeType !== 1 ) { continue; }
 var thisNode = theCats.childNodes[i];
 var titleDiv = thisNode.getElementsByTagName("DIV")[0];
[...]

 

Dette virker :-)

Endret av luxus
Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste
×
×
  • Opprett ny...