1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

How to make a button fire a function again after window take over from it

Discussion in 'JavaScript' started by ketting00, Jan 8, 2017.

  1. #1
    Hey guys,

    I've made a simple JavaScript toggle, but I got struck on how to make a button fire the function every time when you click on it. I don't know how to explain this. But take a look at the code and tell me how to achieve the result I want. ('In case you were lazy to write from scratch, the code is full functioning') ;)
    
    <!DOCTYPE html>
    <html><head>
        <style>
            div { background: red; display: none; padding: 20px 10px; }
        </style>
    </head><body>
        <input type=button id=button value="Click Me" /><br/><br/>
        <div>
            <input type=text placeholder="Type in here..." />
        </div>
        <script>
            var d = document.getElementsByTagName('div')
             , b = document.getElementById('button');
          
            b.addEventListener('click', () => {
                (d[0].style.display !== 'block') ? d[0].style.display = 'block' : d[0].style.display = 'none';
            });
            d[0].addEventListener('mouseup', (e) => {
                e.stopPropagation();
            });
            window.addEventListener('mouseup', () => {
                d[0].style.display = 'none';
            });
        </script>
    </body></html>
    
    Code (markup):
    Thank you,
    SEMrush
     
    ketting00, Jan 8, 2017 IP
    SEMrush
  2. qwikad.com

    qwikad.com Prominent Member Affiliate Manager

    Messages:
    5,316
    Likes Received:
    990
    Best Answers:
    16
    Trophy Points:
    350
    #2
    qwikad.com, Jan 8, 2017 IP
  3. ketting00

    ketting00 Active Member

    Messages:
    671
    Likes Received:
    13
    Best Answers:
    3
    Trophy Points:
    68
    #3
    Thank you,

    Not quite. I mean I want to do like the one on twitter menu. Take a look and try it. Many web sites has this feature. If I can't make it myself I have to borrow from someone. :D

    I don't use jQuery for a long time I almost forgot everything about it. :mad:
     
    ketting00, Jan 8, 2017 IP
  4. fehtrar

    fehtrar Active Member

    Messages:
    11
    Likes Received:
    2
    Best Answers:
    1
    Trophy Points:
    55
    #4
    Not sure what do you want to achieve but you can simply disable the button make it not fired; with b.disabled = true; and b.disabled = false; to enable it again.
    I assume you want :
    <!DOCTYPE html>
    <html><head>
        <style>
            div { background: red; display: none; padding: 20px 10px; }
        </style>
    </head><body>
        <input type=button id=button value="Click Me" /><br/><br/>
        <div>
            <input type=text placeholder="Type in here..." />
        </div>
        <script>
            var d = document.getElementsByTagName('div')
             , b = document.getElementById('button');
         
            b.addEventListener('click', () => {
                (d[0].style.display !== 'block') ? d[0].style.display = 'block' : d[0].style.display = 'none';
                b.disabled = true;
            });
            d[0].addEventListener('mouseup', (e) => {
                e.stopPropagation();
            });
            window.addEventListener('mouseup', () => {
                d[0].style.display = 'none';
                b.disabled = false;
            });
        </script>
    </body></html>
    HTML:
     
    fehtrar, Jan 18, 2017 IP
  5. ketting00

    ketting00 Active Member

    Messages:
    671
    Likes Received:
    13
    Best Answers:
    3
    Trophy Points:
    68
    #5
    Nothing different result produced.

    I'll put this aside for a while. I've asked a guy who help developed Firefox, even an engineer at that talent level cannot help me on this. :(
     
    ketting00, Jan 21, 2017 IP
  6. hdewantara

    hdewantara Active Member

    Messages:
    405
    Likes Received:
    33
    Best Answers:
    17
    Trophy Points:
    80
    #6
    Hi.
    It (post #1) surely toggles but only with <enter> or <space> key at the button.
    Not with mouse-click, because of the last part:
    window.addEventListener('mouseup', () => {
      d[0].style.display = 'none';
    });
    Code (JavaScript):
    Hmm, strange looking code man.
    I didn't know we could replace
    function(){}
    Code (JavaScript):
    with this syntax:
    () => {}
    Code (JavaScript):
     
    hdewantara, Jan 22, 2017 IP
  7. sarahk

    sarahk iTamer Staff

    Messages:
    23,633
    Likes Received:
    3,191
    Best Answers:
    89
    Trophy Points:
    615
    #7
    twitter has lots of buttons to press. are you just trying to show an input field and hide it? Where does the complexity come in?
     
    sarahk, Jan 22, 2017 IP