Javascript Show / Hide

[DeepFreeze.NL]

Hee,

Ik heb een kort javascriptje gebouwd om ervoor te zorgen dat bepaalde <div> blokken verborgen worden en weer tevoorschijnkomen. Dit werkt wel in IE, maar niet in FF. Weet iemand wat ik fout doe?

Link in pagina:
<a href="javascript:showWMP();">Online</a> or <a href="javascript:showWinamp();">Winamp</a>

Voorbeeld DIV blok:
<div id="BoxWinamp" class="Content" align="center" style="display: none">
<a href="http://zegikniet.nl">test</a></div>

Script in extern .js bestand:
//Show WMP box
function showWMP() {
BoxWMP.style.display = "";
BoxWinamp.style.display = "none";
}

//Show Winamp box
function showWinamp() {
BoxWMP.style.display = "none";
BoxWinamp.style.display = "";
}

Wie kan me helpen?

[ Voor 17% gewijzigd door DeepFreeze.NL op 21-04-2006 16:27 ]

[Scott]

Mind the getElementById()

JavaScript:

//Show WMP box
function showWMP() {
document.getElementById('BoxWMP').style.display = "";
document.getElementById('BoxWinamp').style.display = "none";
}

//Show Winamp box
function showWinamp() {
document.getElementById('BoxWMP').style.display = "none";
document.getElementById('BoxWinamp').style.display = "";
}

[crisp]

Q: hoe herken ik een IE-only javascript?
A: het script gaat er vanuit dat alles met een ID in de global namespace staat
Q: hoe los ik dat op?
A: door netjes getElementById te gebruiken

oh, en gebruik aub geen anchors en/of het javascript: pseudo-protocol als iets geen link is.

[ Voor 21% gewijzigd door crisp op 21-04-2006 16:32 ]

[DeepFreeze.NL]

Oeh, dankje!

[Tanuki]

crisp schreef op vrijdag 21 april 2006 @ 16:31:
Q: hoe herken ik een IE-only javascript?
A: het script gaat er vanuit dat alles met een ID in de global namespace staat
Q: hoe los ik dat op?
A: door netjes getElementById te gebruiken

oh, en gebruik aub geen anchors en/of het javascript: pseudo-protocol als iets geen link is.

Waarom dan niet, als ik vragen mag? En... wat moet je dan gebruiken?

[killercow]

gewoon, onclick events op een div/span/button/whatever, met wat css om een cursor te triggeren.

HTML:

<span style="cursor:hand;cursor:pointer;" onclick="functiecall();">klik me! </span>

javascript protocol is een echte html 4uitvinding, daar zijn we al wat jaartjes vanaf gestapt, en A tags zijn bedoelt als anker, (waarnaar je springen / waarmee je naar een andere pagina springt), niet als knopje, toch?

[ Voor 62% gewijzigd door killercow op 21-04-2006 20:56 ]

[crisp]

Het uitvoeren van script vanuit een href vind ik fundamenteel fout. Script hoort in een eventhandler, en als het geen navigational doel heeft dan dient geen link gebruikt te worden maar een element waarvan duidelijk is dat er een bepaalde actie achter hangt - een button bijvoorbeeld.
Een uitzondering is wanneer je de href gebruikt als alternatief voor non-JS enabled clients:

HTML:

<a href="pagina.php?showdiv=foo" onclick="showdiv('foo');return false">usability</a>

[Verwijderd]

Ik ben het met je eens, crisp; buttons zijn hier bij uitstek geschikt voor. Echter is het in veel gevallen voor de developer gewoon praktischer om een <a> te gebruiken. Je hoeft dan soms wat minder moeite te doen om de styling in orde te krijgen. Dat zou dan natuurlijk ook met een <span> kunnen, oid, maar die mist weer de focus mogelijkheden van een <a> (met href).