[JS] Overbodige enter na aanpassen innerHTML

[NMe]

Ik probeer een simpel scriptje te maken dat posts in een gastenboek kan 'opvouwen' en 'uitklappen'. Gaat allemaal perfect in FireFox, maar IE lijkt niet zo tevreden met mijn code.

Het probleem is zo: ik begin met een lege div. De gebruiker klikt op het plusje voor uitvouwen en de post komt tevoorschijn. Werkt gelukkig perfect. Maar als je dan de rommel weer dichtklapt zet IE er een enter achter/in, wat niet de bedoeling is. Zoals ik al zei doet Mozilla dit wel goed.

Dit is mijn (duidelijk niet geoptimaliseerde) javascript functie:

JavaScript:

  function klapInUit(id_in, waarde) {
    id = "gb" + id_in;
    klapid = "klap" + id_in;
    if (document.getElementById) {
      if (document.getElementById(id).innerHTML == "")
        document.getElementById(id).innerHTML = waarde;
      else
        document.getElementById(id).innerHTML = "";
      if (document.getElementById(klapid).innerHTML == "+")
        document.getElementById(klapid).innerHTML = "-";
      else
        document.getElementById(klapid).innerHTML = "+";
    }
    else if (document.all) {
      if (document.all[id].innerHTML == "")
        document.all[id].innerHTML = waarde;
      else
        document.all[id].innerHTML = "";
      if (document.all[klapid].innerHTML == "+")
        document.all[klapid].innerHTML = "-";
      else
        document.all[klapid].innerHTML = "+";
    }
    else if (document.layers) {
      if (document.layers[id].innerHTML == "")
        document.layers[id].innerHTML = waarde;
      else
        document.layers[id].innerHTML = "";
      if (document.layers[klapid].innerHTML == "+")
        document.layers[klapid].innerHTML = "-";
      else
        document.layers[klapid].innerHTML = "+";
    }
  }

Zoals je ziet zet ie, als er niets in de div staat, de inhoud van 'waarde' erin, en anders maakt ie hem leeg. Lijkt me logisch toch? Maja, dat vindt MS dus niet. Zijn er andere manieren om het op te lossen? Ik heb Google geprobeerd maar zou niet weten waar ik op moet zoeken.

Overigens doet Mozilla het ook niet helemaal goed. Zo komen er in mijn tabel rare vakjes links en rechts in mijn tabel, terwijl die verder volgens mij goed in elkaar zit. Verder staat de bovenste post in het gastenboek standaard iets te hoog afgedrukt, terwijl IE dit allebei goed laat zien.

Je kunt op de link hiernaast kijken wat ik probeer te doen: http://217.121.96.76
(server op mijn eigen pc, dus trage upload en alleen 's avonds te bekijken, sorry)

[crisp]

Gebruik voor dit soort simpele dingen aub geen innerHTML, maar gewoon de DOM functies.
Verder: is IE4 ondersteuning van belang? zo nee, dump dan die document.all code. Je ns4 document.layers-benadering gaat trouwens al helemaal niet werken want NS4 kent geen innerHTML.

[Verwijderd]

dat is een van de langste klap scipts die ik ooit gezien heb

code:

<a href="#" onclick="javascript:this.nextSibling.style.display=(this.nextSibling.style.display=='block')?'none':'block'">klap in/uit</a>
<p style="display:block">bericht</p>

uit m'n hoofd, verder niet getest

edit: wel getest en de js in de onclick, let er verder op dat er geen spatie/linebreak tussen de a en de p staat, anders is de nextSibling die textnode

[ Voor 118% gewijzigd door Verwijderd op 24-03-2004 21:50 . Reden: er moet natuurlijk .display achter sie stylle en nextSibling camelCased :X ]

[NMe]

crisp schreef op 24 maart 2004 @ 21:30:
Gebruik voor dit soort simpele dingen aub geen innerHTML, maar gewoon de DOM functies.
Verder: is IE4 ondersteuning van belang? zo nee, dump dan die document.all code. Je ns4 document.layers-benadering gaat trouwens al helemaal niet werken want NS4 kent geen innerHTML.

Ik zal eens wat tutors over DOM functies opzoeken. Ik moet eerlijk zeggen dat ik weinig kaas gegeten heb van JS en meer thuis ben in PHP. Ik had dan ook geen idee waar ik op moest zoeken.

@mophor: ik zal eens kijken wat dat uithaalt.

[NMe]

Verwijderd schreef op 24 maart 2004 @ 21:32:
dat is een van de langste klap scipts die ik ooit gezien heb

code:

<a href="javascript:this.nextSibling.style.display=(this.nextSibling.style.display=='block')?'none':'block'">klap in/uit</a>
<p style="display:block">bericht</p>

uit m'n hoofd, verder niet getest

Werkt niet ben ik bang. "this.nextSibling is leeg of geen object". Heb ook nog wat met de getNextSibling method geklooid maar dat haalt ook niet veel uit.

[crisp]

bah, javascript: in een href
en nextSibling verwijst in dit voorbeeld naar een textNode - namelijk de enter na </a>

[NMe]

Hehe zodra ik het werkend krijg verplaats ik het wel naar een functie. Maar die enter is het probleem niet volgens mij, want als ik die weghaal dan doettie het nog niet...

[Verwijderd]

ik had mijn post ook ff aangepast, en zorg er idd voor dat de a en de p meteen na elkaar komen. nogmaals:

code:

<a href="#" onclick="this.nextSibling.style.display=(this.nextSibling.style.display=='block')?'none':'block'">
klap in/uit</a><p style="display:block">bericht</p>

[ Voor 21% gewijzigd door Verwijderd op 24-03-2004 22:05 ]

[NMe]

Tnx, dat werkt inderdaad.

(Damn wat was mijn eigen methode lastig... )

[crisp]

anders doe je het gewoon zo:

HTML:

<html>
<head>
<title>klipklap</title>
<script type="text/javascript">

function klapmaar(el) {

  var theP = el.nextSibling;
  while (theP.nodeType != 1) theP = theP.nextSibling;

  if (theP.style.display == 'none') {

    theP.style.display = 'block';
    el.firstChild.nodeValue = '-';

  } else {

    theP.style.display = 'none';
    el.firstChild.nodeValue = '+';

  }

}

</script>
</head>
<body>
<span style="cursor:pointer" onclick="klapmaar(this)">+</span>
<p style="display:none">bericht</p>
</body>
</html>

[NMe]

Tnx, ook die werkt. Ik heb hem na een kleine aanpassing overgenomen. Maar nou lijkt ie voor alle posts te werken behalve voor de eerste. Terwijl de code er hetzelfde uitziet als die van de rest... Iemand een idee? Ik zal de eerste en de tweede posts even laten zien:

HTML:

<span style="font-family: courier, system, sans-serif; font-weight: bold; cursor: pointer" onclick="klapInUit(this)">+</span><span> <b>sammy</b> (<a href="mailto:[e-mail]">[img]"template/images/email.gif"[/img]</a>) op woensdag 24 maart 2004 om 20:56<br /></span><div style="padding-left: 10px; display: none">post, blahblah, weinig interessant<br /><br /></div>
<span style="font-family: courier, system, sans-serif; font-weight: bold; cursor: pointer" onclick="klapInUit(this)">+</span><span> <b>Masha</b> (<a href="mailto:[e-mail]">[img]"template/images/email.gif"[/img]</a> <a href="http://www.sugababes.nl/masha" target="_blank">[img]"template/images/home.gif"[/img]</a>) op woensdag 24 maart 2004 om 20:29<br /></span><div style="padding-left: 10px; display: none">Nog zo'n post geval<br /><br /></div>

Ze zien er voor zover ik kan zien identiek uit, dus ik zie niet waarom het niet zou moeten kunnen werken? Iemand?

[NMe]

Ok, het lijkt er dus op dat ik het hele blok met posts in een paragraph tag had staan. Als ik die weghaal werkt het wel. Tnx voor de hulp!