Javascript Spoiler Difficulties

Question

So I got this code

<div style="margin: 5px 20px 5px 20px;"> 
    <div style="margin-bottom:2px; font-size: 80%;">
        <strong>Spoiler  </strong><input type="button" value="Show" style="width:45px;font-size:10px;margin:0px;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 = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" /> 
    </div> 
<div>

    <div style="display: none;">
        <div style="background: rgba(15, 15, 15, 0.8); padding: 6px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;">{param}
        </div>
    </div>

And it's working fine, well the hiding/showing is working fine, but the value of the button won't change (e.g Show or Hide). I tried to change it in the code but it wouldn't really work, can anybody help me out here? P.S This is being used on a Vbulletin Forum Board, as a bbcode.

Thanks! Jordy

Answer 1

Just remove the this.innerText = ''; bits and it will work. Why did you even have them in there?

<div style="margin: 5px 20px 5px 20px;">
    <div style="margin-bottom:2px; font-size: 80%;"> <strong>Spoiler  </strong>
        <input type="button" value="Show" style="width:45px;font-size:10px;margin:0px;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.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.value = 'Show'; }" />
    </div>
    <div>
    <div style="display: none;">
        <div style="background: rgba(15, 15, 15, 0.8); padding: 6px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;">{param}</div>
    </div>

For readability I suggest putting all the CSS styles in an external CSS file and your JavaScript in a function and also in an external JS file but that is up to you.