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.

Answer 2

I'm glad that @putvande's answer solved your problem, but I think it's still hard to read what exactly is going on with that one line of code.

As mentioned before I also suggest to separate the code into inline chunks in the same HTML file or - even better - into separate files, so that you can maintain code readability.

I also think that your original DOM API call to get hold of the second div was way too complicated compared to simply using classes (see the JS method for reference).

The following was taken from a Fiddle I created for your question:

<!-- The updated HTML: -->
<div style="container"> 
    <div class="wrapper">
        <strong>Spoiler </strong><input class="button" type="button" value="Show" onclick="handleClick(this);" /> 
    </div> 
<div>

<div class="banner-container">
    <div class="banner">{param}</div>
</div>

// The JavaScript code extracted:

    function handleClick (target) {
        var el = document.getElementsByClassName('banner-container')[0];
        if (el.style.display === '') {
          el.style.display = 'block';
          target.value = 'Hide';
        } else {
          el.style.display = '';
          target.value = 'Show';
        }
    };

/* The CSS extracted: */

    .container {
        margin: 5px 20px 5px 20px;
    }
    .wrapper {
        margin-bottom: 2px;
        font-size: 80%;
    }
    .button {
        width: 45px;
        font-size: 10px;
        margin: 0px;
        padding: 0px;
    }

    .banner-container {
        display: none;
    }
    .banner {
        background: rgba(15, 15, 15, 0.8);
        padding: 12px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
    }

Fiddle: http://jsfiddle.net/robertp/3D63f/14/

Next time you ask in StackOverflow, please separate your code, so that it's easier to read - JSFiddle is a very useful tool for that :)