Search code examples
javascriptcssonclickbbcode

Need advice for onclick BBCode Spoiler-Tag in phpBB

I've implemented this javascript nearly at the bottom of my overall_header.html:

<script lang="javascript" type="text/javascript">
        window.onload = function() {
            var IMG = document.getElementsByTagName('img');
            for (var i=0;i<IMG.length;i++) {
                IMG[i].addEventListener('click',fullImage,false);
            }
            var SPOILER = document.getElementsByClassName('spoiler');
            for (var i=0;i<SPOILER.length;i++) {
                SPOILER[i].addEventListener('click',showSpoiler,false);
            }
        };
        function fullImage() {
            if (this.className == '') {
                this.className = 'full-image';
            } else {
                this.className = '';
            }
        }
        function showSpoiler() {
            if (this.className == 'spoiler') {
                this.className = 'spoiler show';
            } else {
                this.className = 'spoiler';
            }
        }
    </script>

Then I've created a custom BBCode Tag in ACP:

[spoiler]{TEXT}[/spoiler]
<span class="spoiler" onclick="function('showSpoiler');>{TEXT}</span>

Also the corresponding CSS classes in my stylesheet.css

.spoiler { color: #000000; background: #000000; cursor: help; }
.spoiler img { visibility: hidden; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; }
.spoiler.show { text-decoration: none; background: transparent; }
.spoiler.show img { visibility: visible; display: inline-block; -webkit-user-select: all; -moz-user-select: all; user-select: all; pointer-events: all; }

Now what happens is that text marked with a BBcode spoiler tag will be blacked out and when I hover the mouse over it, the cursor will change to the help cursor icon, but nothing happens "onclick". Please can you advise how I can get this stuff finally to work?

Please can you help me? Many thanks in advance!

Solution

  • Seems you're missing a double quote on the end of your span's onclick attribute.

    EDIT: I've fiddlechecked to be sure. As you can see it's working as expected. My advice would be to start using a IDE (such as Netbeans, PHPStorm or Eclipse) or at least an editor (NP++ for instance) that supports syntax highliting so as not to overlook such typo futilities..

    <span class="spoiler" onclick="function('showSpoiler')">spoilertext</span>

    https://jsfiddle.net/wj8oqk7o/