[JS]Waarom werkt deze functie alleen in IE en niet in FF? - Softwareontwikkeling

zondag 27 april 2008 04:32

Acties:

Topicstarter

De volgende code toont en verbergt verschillende contentelementen, namelijk divs.(pagina's)
Echter werkt deze code bij mij alleen in IE browsers, maar niet in Firefox browsers.
Heeft iemand enig idee waarom dat is?

code:

<html>
<head></head>

<body>

<div id="menu">
    <span onclick="changePage(1);">button01</span>
    <span onclick="changePage(2);">button02</span>
                <span onclick="changePage(3);">button03</span>
</div>
<div id="content">
        <div id="1">
        Page 1
    </div>
    <div id="2">
        Page 2
    </div>
    <div id="3">
        Page 3
    </div>
</div>


<script type="text/javascript">

function changePage(paginaNr){  
    
    var NumberOfPages = 3;  
    
    //Verberg alle divs 
    for(i=1; i<=numberOfPages; i++){
        document.getElementById(i).style.visibility = "hidden";
    }
    
    //Toon de opgevraagde div
    document.getElementById(paginaNr).style.visibility = "visible";     
}

</script>

</body>
</html>

zondag 27 april 2008 04:38

Acties:

Alex)

Een identifier moet beginnen met een letter, als ik het me goed herinner. "1" is ongeldig", "p1" is geldig.

We are shaping the future

zondag 27 april 2008 05:11

Acties:

Arcane Apex

Topicstarter

Ik heb het opgelost. Niet alle browsers schijnen document.getElementById() te ondersteunen. Sommigen ondersteunen document.all[] en anderen weer document.layers[].
Men kan met een if statement checken welke van de 3 gebruikt moet worden door de browser.

if(document.getElementById)
{
//Jouw code
}
else if(document.all)
{
//Jouw code
}
else if(document.layers)
{
//Jouw code
}

zondag 27 april 2008 05:20

Acties:

Arcane Apex

Topicstarter

Alex) schreef op zondag 27 april 2008 @ 04:38:
Een identifier moet beginnen met een letter, als ik het me goed herinner. "1" is ongeldig", "p1" is geldig.

Daar zat ik ook aan te denken. Echter liep ik daarbij tegen mijn eigen onwetendheid aan mbt JavaScript. Namelijk wanneer ik p1 ipv 1 zou gebruiken, dan wist ik niet hoe ik via een loop langs de elementen heen kon gaan. Namelijk dan zou ik de string "p" moeten concatonaten met een numerieke variabele. Ik weet hoe dat in PHP moet, maar niet in JavaScript.
Dit is hoe ik het in PHP gedaan zou hebben, maar dat werkt niet in JavaScript denk ik:

document.getElementById("p".$mijnVariabele);

Ook heb ik het volgende stukje code geprobeerd te gebruiken in de functie. Echter werkte het niet en kreeg ik een error. Ik heb nog niet met zekerheid kunnen achterhalen waarom dat is, maar ik vermoed dat wanneer removeChild op alle objecten/divs wordt toegepast, dat alle objecten dan gewoon verwijderd zijn uit de DOM en niet meer met appendChild toegevoegd kunnen worden.

code:

    for(i=1; i<=numberOfPages; i++){
        document.getElementById('content').removeChild(document.getElementById(i));
    }   
    
    document.getElementById('content').appendChild(document.getElementById(paginaNr));

[ Voor 6% gewijzigd door Arcane Apex op 27-04-2008 06:28 ]

zondag 27 april 2008 05:35

Acties:

Arcane Apex

Topicstarter

Concationation in JavaScript heb ik onderhand ook weten te vinden.
Het kon simpelweg alsvolgt:

document.getElementById('p'+mijnNumeriekeVariabele);

Dan rest alleen nog het probleem van removeChild en appendChild en daarnaast vraag ik me ook af wat het verschil is tussen appendChild en addChild. Ik heb op google nauwelijks informatie kunnen vinden over addChild().

[ Voor 15% gewijzigd door Arcane Apex op 27-04-2008 05:45 ]

zondag 27 april 2008 05:55

Acties:

Alex)

Mm, dit zal zo niet werken: je haalt nu eerst alle elementen uit je DOM, om daarna een element wat je al hebt weggehaald, opnieuw toe te voegen. Precies wat je al zei

Bovendien hoef je helemaal niet met de DOM te gaan rommelen hiervoor, een beetje CSS is meer dan genoeg:

HTML:

<html>
<head></head>

<body>

<div id="menu">
    <span onclick="changePage(1);">button01</span>
    <span onclick="changePage(2);">button02</span>
    <span onclick="changePage(3);">button03</span>
</div>
<div id="content">
    <div id="p1">
        Page 1
    </div>
    <div id="p2">
        Page 2
    </div>
    <div id="p3">
        Page 3
    </div>
</div>

<script type="text/javascript">
var NumberOfPages = 3;    

function changePage(paginaNr)
{
    // Verberg alle divs    
    for(var i = 1; i < numberOfPages; i++){
        document.getElementById("p" + i).style.display = "none";
    }
    
    //Toon de opgevraagde div
    document.getElementById("p" + paginaNr).style.display = "block";
}
</script>
</body>
</html>

Volgens mij zou dit moeten werken. Overweeg trouwens wel om de <span>'s te verwisselen voor <a>'s, aangezien anchor's wel tabbaar zijn en spans niet. Zorg evt. ook voor fallback voor mensen zonder JS

We are shaping the future

zondag 27 april 2008 07:46

Acties:

TERW_DAN

Met een hamer past alles.

Waarom bouw je het trouwens niet zo dat je niet handmatig de numberOfPages hoeft op te geven? Nu moet je eigenlijk op 2 plekken het zo maken dat je dit moet doen (daadwerkelijk de elementen erin zetten en die variabele aanpassen).

Als je nu de children oppakt van de content div en daar doorheen loopt. Dan maakt het niet uit hoeveel je erin hebt staan, maar dan doet die loop het werk, zodat je die variabele niet in hoeft te stellen. Meer failsafe en mocht je je appendChild en removeChild wat uitgebreider gaan gebruiken nog makkelijker ook.

zondag 27 april 2008 08:49

Acties:

Verwijderd

Arcane Apex schreef op zondag 27 april 2008 @ 05:11:
Ik heb het opgelost. Niet alle browsers schijnen document.getElementById() te ondersteunen. Sommigen ondersteunen document.all[] en anderen weer document.layers[].
Men kan met een if statement checken welke van de 3 gebruikt moet worden door de browser.

Toen ik dit las moest ik heel even kijken of ik niet een thread uit 2001 zat te lezen

Vergeet document.all en document.layers al helemaal. Er is nu echt geen reden meer om dat te gebruiken.

zondag 27 april 2008 22:26

Acties:

Joen

Verander eens

code:

1	changePage(1);

naar

code:

1	changePage('1');

(en voor de andere nummers natuurlijk de 1 vervangen...

Je doet nu een aanroep met een getal wat ook als getal wordt gezien terwijl je een div-layer met een getal wat als tekst wordt gezien aan wilt spreken.

maandag 28 april 2008 12:53

Acties:

MrDummy

Nog steeds gek op anime...

En in IE moet name en id niet ergens gelijk zijn. Alle benamingen moeten uniek zijn. Firefox heeft geen probleem mee, maar IE heeft wel kritiek op. Door alles met unieke naam te geven werkt IE dan prima zonder foutmelding.

maandag 28 april 2008 14:48

Acties:

Bosmonster

*zucht*

Joen schreef op zondag 27 april 2008 @ 22:26:
Verander eens
code:
1
changePage(1);
naar
code:
1
changePage('1');
(en voor de andere nummers natuurlijk de 1 vervangen...

Je doet nu een aanroep met een getal wat ook als getal wordt gezien terwijl je een div-layer met een getal wat als tekst wordt gezien aan wilt spreken.

Sinds wanneer is javascript type-safe? Volgens mij converteert is alles on-the-fly en zou dit geen problemen op mogen leveren.

[ Voor 9% gewijzigd door Bosmonster op 28-04-2008 14:49 ]

maandag 28 april 2008 15:21

Acties:

Joen

Dit ontdekte ik sinds ik uit een tekstuele 10 plus het cijfer 1 er bij opgeteld het cijfer 101 kreeg ipv 11.
Met parseInt() kon ik die 10 naar een daadwerkelijk cijfer 10 omzetten. Daar vanuit gaande denk ik dat je dus ook secuur moet zijn in het type data in functie-aanroepen.

dinsdag 29 april 2008 13:28

Acties:

Arcane Apex

Topicstarter

Alex) schreef op zondag 27 april 2008 @ 05:55:
Bovendien hoef je helemaal niet met de DOM te gaan rommelen hiervoor, een beetje CSS is meer dan genoeg:

Dat heeft enorm geholpen. Bedankt!

Ik vraag me nog wel steeds af dat wanneer men probeert een DOM node te verwijderen met removeChild(), hoe men dan diezelfde node weer kan toevoegen. In feite haalt men dus content weg, maar om dat weer toe te voegen lijkt het me dat die content zich nog ergens moet bevinden zodat het weer aan de DOM toegevoegd kan worden mbv addChild() of appendChild().
Heeft iemand enig idee hoe je dit kan doen?

dinsdag 29 april 2008 13:57

Acties:

Alex)

Niet

Met removeChild gooi je iets ook echt uit de DOM. De enige manier om het terug te krijgen, is een kopie maken en die weer invoeren.

Maar waarom je dát zou willen

We are shaping the future

dinsdag 29 april 2008 14:02

Acties:

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Arcane Apex schreef op dinsdag 29 april 2008 @ 13:28:
Ik vraag me nog wel steeds af dat wanneer men probeert een DOM node te verwijderen met removeChild(), hoe men dan diezelfde node weer kan toevoegen.

Alex) schreef op dinsdag 29 april 2008 @ 13:57:
Niet

Ik heb het even te druk om te testen, maar removeChild (ook onder MS implementatie) geeft volgens mij de verwijderde node terug; die reference kun je natuurlijk wel vasthouden om daarna weer ergens anders te inserten lijkt me.

[ Voor 32% gewijzigd door RobIII op 29-04-2008 14:04 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

dinsdag 29 april 2008 14:06

Acties:

Alex)

RobIII schreef op dinsdag 29 april 2008 @ 14:02:
[...]

[...]

Ik heb het even te druk om te testen, maar removeChild (ook onder MS implementatie) geeft volgens mij de verwijderde node terug; die reference kun je natuurlijk wel vasthouden om daarna weer ergens anders te inserten lijkt me.

Ahja, je hebt gelijk.

Return Value

Returns a reference to the object that is removed.

Dan zou het mogelijk moeten zijn

We are shaping the future

dinsdag 29 april 2008 14:22

Acties:

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Alex) schreef op dinsdag 29 april 2008 @ 14:06:
Dan zou het mogelijk moeten zijn

quote: http://developer.mozilla.org/en/docs/DOM:element.removeChild
The removed child node still exists in memory, but is no longer part of the DOM. You may reuse the removed node later in your code, via the oldChild object reference.

Lijkt me wel dus

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

dinsdag 29 april 2008 16:42

Acties:

crisp

Devver

Pixelated

Sterker nog: om een node te verplaatsen hoef je niet eens eerst een removeChild te doen, een appendChild van een node die zich al ergens anders in de documenttree bevind is feitelijk al een move

Intentionally left blank

dinsdag 29 april 2008 16:45

Acties:

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

crisp schreef op dinsdag 29 april 2008 @ 16:42:
Sterker nog: om een node te verplaatsen hoef je niet eens eerst een removeChild te doen, een appendChild van een node die zich al ergens anders in de documenttree bevind is feitelijk al een move

OMG. Je wil niet weten hoeveel code nu een stomme constructie bevat omdat dit nog nooit in me opgekomen is om te proberen... En mierenneukert als ik ben _{of kan zijn} moet ik natuurlijk die overtolligheid nu overal uit gaan slopen

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

dinsdag 29 april 2008 16:52

Acties:

crisp

Devver

Pixelated

RobIII schreef op dinsdag 29 april 2008 @ 16:45:
[...]

OMG. Je wil niet weten hoeveel code nu een stomme constructie bevat omdat dit nog nooit in me opgekomen is om te proberen... En mierenneukert als ik ben _{of kan zijn} moet ik natuurlijk die overtolligheid nu overal uit gaan slopen

Daarom noem ik het nog maar eens, veel mensen weten het niet

Intentionally left blank

Pagina: 1

Reageer