innerText gör ny rad?

Jag håller på med ett hjälpdokument, där jag har en topic, klickar man på den visas en div med sub-topics som i sin tur kan visa hjälptexten. Fungerar fint, men jag tänkte lägga till ett +/- framför den klickbara texten för att visa om ett klick öppnar eller stänger. Jag valde att göra en label för att innehålla ett plus eller minus, och sedan använda label.innerText = + eller -. Det fungerar, men första gången man trycker på länken infogas en radbrytning före det nya tecknet, och det är inte så fint. Varför blir det så? Beror det på labeln?

Egenskapen innerText finns bara i Internet Explorer. Använd innerHTML istället.

Varför har du valt att använda label för detta?

Kan du visa lite kod?

Att jag valde label var helt enkelt för att jag inte kom på nåt annat...
Att innerText bara var IE visste jag inte. Byter till innerHTML.

  function toggleSub(lID) {
   var showhide, plusminus, lIDLab;
   
   lIDLab = lID + "Lab";

   if(document.getElementById) {
    showhide = (document.getElementById(lID).style.display == "block" ? "none" : "block");
    plusminus = (showhide == "block" ? "-" : "+");
    document.getElementById(lID).style.display = showhide;
    document.getElementById(lIDLab).innerHTML = plusminus;
   }
   else if(document.all) {
    showhide = (document.all.lID.style.display == "block" ? "none" : "block");
    plusminus = (showhide == "block" ? "-" : "+");
    document.all.lID.style.display = showhide;
    document.all.lIDLab.innerHTML = plusminus;

   }
   else if(document.layers) {
    showhide = ('document.' + lID + '.display' == "block" ? "none" : "block");
    plusminus = (showhide == "block" ? "-" : "+");
    eval('document.' + lID + '.visibility = "' + showhide + '"');
    eval('document.' + lIDLab + '.innerHTML = "' + plusminus + '"');
   }
  }

Är långt ifrån bra på javascript, så det säkerligen många mindre bra lösningar här :r

Javascriptet ser ju rätt ut, förutom koden för Netscape 4, då, som inte fungerar. Värdena för visibility är inte 'block' och 'none' utan 'show' och 'hide', eller om det var 'visible' och 'hidden'. Jag minns inte vilken av varianterna som var till Netscape.

Hur använder du koden?

Jo, jag märkte att jag skrivit visibility av misstag där när jag klistrade in koden. Har korrigerat det.

Jag anropar funktionen med en onClick på en länk till "#".

Jag provade att byta ut label mot span vilket antagligen är ett bättre element för syftet. Men det blir fortfarande en ny rad :|

Jag får inga nya rader när jag testar, varken i IE eller FF.

Du får visa html-koden som du använder. Jag kan ju inte leta efter ett fel som jag inte kan upprepa.

<span><a href="#" onClick="toggleSub('Hjälpavsnitt');">
<span class="labelspan" id="HjälpavsnittLab">+</span> Hjälpavsnittstitel</a></span>
<div id="ChangeLog">
<!-- Hjälptext -->
</div>

Varje hjälpavsnitt är uppbyggt som ovan. Att en span är classad beror på att standard-span har några attribut som inte ska överföras på pluset/minuset. Första gången man öppnar ett avsnitt så hoppar det och allting nedanför ner en rad.

Kan du inte visa kod som du använder istället? Den där fungerar ju inte alls eftersom id:na inte stämmer.

När jag rättar till id på div:en så får jag ändå inte någon extra rad, varken i IE eller FF, varken med xhtml 1.1, html 4.01 eller i quirks mode (ingen doctype).

Tråden flyttad från HTML, XHTML & CSS.

mvh Palle
Moderator webForum

Ojdå, ändrade visst inte alla id... Tänkte att syftet med dem skulle framgå bättre om jag skrev Hjälpavsnitt istället för de ibland något kryptiska id jag har. Men det var å andra sidan det ända jag ändrade.
Jag har inte specat nån doctype.
Så om jag bara tar bort själva hjälptexten ser koden ut så här

<script>
  function toggleSub(lID) {
   var showhide, plusminus, lIDLab;

   lIDLab = lID + "Lab";

   if(document.getElementById) {
    showhide = (document.getElementById(lID).style.display == "none" ? "block" : "none");
    plusminus = (showhide == "block" ? "-" : "+");
    document.getElementById(lID).style.display = showhide;
    document.getElementById(lIDLab).innerHTML = plusminus;
   }
   else if(document.all) {
    showhide = (document.all.lID.style.display == "none" ? "block" : "none");
    plusminus = (showhide == "block" ? "-" : "+");
    document.all.lID.style.display = showhide;
    document.all.lIDLab.innerHTML = plusminus;

   }
   else if(document.layers) {
    showhide = ('document.' + lID + '.display' == "none" ? "block" : "none");
    plusminus = (showhide == "block" ? "-" : "+");
    eval('document.' + lID + '.display = "' + showhide + '"');
    eval('document.' + lIDLab + '.innerHTML = "' + plusminus + '"');
   }
  }
</script>
</head>
<body>
  <div id="main" style="display: block;">
   <span>Choose a topic:</span><br>
   
   <span><a href="#" onClick="toggleSub('ChangeLog');"><span class="labelspan" id="ChangeLogLab">+</span> Changes from previous version</a></span>
   <div id="ChangeLog">
     <p>hjälptext</p>
   </div>

  <!-- fler topics enl. samma mönster som ovan -->
</div>
</body>
</html>

Jag ska pröva på några andra datorer och se om de uppför sig lika underligt.

Dåså, då kan jag arkivera även denna fråga i facket "Fåniga misstag"... span var stylat på flera ställen, och när jag tryckte på länken fick den display: block, med radbrytningar före och efter sig :r