spoiler - Code werkt wel in IE, maar niet in Chrome

[famlam]

<div style="margin:20px; margin-top:5px">
 <div class="quotetitle">
  <b>Tonen: </b>
 <input type="button" value="uit" style="width:50px;font-size:10px;margin:1px;padding:0px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'aan'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'uit'; }" />
 </div>
 <div class="quotecontent">
  <div style="display: none;">{{{}}}

   Een lange tekst die te verbergen is
 
  </div>
 </div>
</div>

Als ik deze code in IE uitvoer, dan veranderd de tekst van het button van 'uit' naar 'aan' naar 'uit' bij elke klik, maar als ik deze code in Chrome uitvoer dan blijft de tekst bij elke klik op 'uit' staan. Kijk ik bij Chrome bij de developer tools deze foutmelding: "Uncaught Error: NO_MODIFICATION_ALLOWED_ERR: DOM Exception 7" Deze staat op de locatie van de {{{}}} in de HTMLcode hierboven.

Weet iemand hoe ik de bovenstaande code wel (foutloos) kan laten uitvoeren, zodat hij op elke (javascript ondersteunende) browser werkt?

 

[That Guy]

Oh my. Dit is echt een vreselijk geval van inline javascript zeg


Dit[JS]if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'aan'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'uit'; }[/JS]is veel-te-veel werk. Werk (ffs) met ID's, dat is een stuk netter.

Ohja, goed. De code. Dat's erg veel code voor zoiets simpels. Probeer zoiets:
[JS]
function swapz0r(elem)
{
var obj = document.getElementById(elem);

obj.style.display = (obj.style.display == 'none') ? 'block' : 'none';
this.innerHTML = '';
this.value = (this.value == 'aan') ? 'uit' : 'aan';
}
[/JS]
en je html:

<div style="margin:20px; margin-top:5px">
 <div class="quotetitle">
  <b>Tonen: </b>
 <input type="button" value="uit" style="width:50px;font-size:10px;margin:1px;padding:0px;" onclick="swapz0r('geval');" />
 </div>
 <div class="quotecontent">
  <div id='geval' style="display: none;">{{{}}}
 
   Een lange tekst die te verbergen is
 
  </div>
 </div>
</div>

niet getest, maar het gaat om het idee (en het zou moeten werken )


:thumb:

 

[famlam]

Deze code is inderdaad een stuk overzichtelijker, en Chrome's 'developer tools' vertonen nu ook geen foutmelding meer, maar... nu verandert de tekst van het button zelfs niet meer in IE.
De tekst hiervan blijft namelijk altijd op 'uit' staan.
Onderstaande regel wordt dus niet uitgevoerd...
[JS]this.value = (this.value == 'aan') ? 'uit' : 'aan';[/JS]

Ik heb nu dit veranderd:

<div style="margin:20px; margin-top:5px">
	<div class="quotetitle">
		<b>Tonen: </b>
		<input type="button" id="toonverbergbutton" value="uit" style="width:50px;font-size:10px;margin:1px;padding:0px;" onclick="swapz0r();" />
	</div>
	<div class="quotecontent">
		<div id='teverbergen' style="display: none;">
			Een Lange Tekst Die Te Verbergen Is
		</div>
	</div>
</div>

+
[JS]function swapz0r()
{
var obj = document.getElementById('teverbergen');
obj.style.display = (obj.style.display == 'none') ? 'block' : 'none';
obj = document.getElementById('toonverbergbutton');
obj.value = (obj.value == 'uit') ? 'aan' : 'uit';
}[/JS]

en nu doet hij het wel.

Bedankt voor je hulp!