How to add window mouseup event to this javascript toggle

Discussion in 'JavaScript' started by ketting00, Apr 12, 2016.

0
  1. #1
    Hi guys,

    I've tried pure CSS show/hide event, but it isn't cool and isn't lived up to modern web trend.
    So I get back to JavaScript and I've got struck on how to mix these two events together.

    Here's the code I've tried so far:
    
<!DOCTYPE html>
<html>
    <head>
        <style>
            #showme { display: none; }
        </style>
    </head>
    <body>
        <div id=button>Button</div>
        <div id=showme>
            I'm revealed!
        </div>
        <script>
            var d = document, w = window
             , b = d.getElementById('button')
             , a = d.getElementById('showme')
             ;

            b.addEventListener('click', function() {
                if (a.style.display !== 'block')
                    a.style.display = 'block';
                else
                    a.style.display = 'none';
            });
            w.addEventListener('mouseup', function(e) {
                a.style.display = 'none';
            });
        </script>
    </body>
</html>
    Code (markup):
    Any suggestion is appreciated.
    Thank you,
     
    ketting00, Apr 12, 2016 IP
  2. ketting00

    ketting00 Well-Known Member

    Messages:
    782
    Likes Received:
    28
    Best Answers:
    3
    Trophy Points:
    128
    #2
    It turns out I used the wrong method. It's window onload event, not element clicking event.
     
    ketting00, Apr 12, 2016 IP