Question

113

A function that runs on the second click

rated 0 times [ 117] [ 4] / answers: 1 / hits: 24300 / 7 Years ago, thu, june 15, 2017, 12:00:00

I'm running a function that shows a left menu when I click a button.

I need that the menuColapsado() function to run on the first click of the ID menu_button but the function shows the html element on the second click instead of the first.
My code is below

function myFunctionxxx() {

  var xxx = document.getElementsByTagName(BODY)[0];

  xxx.style.backgroundColor = red;

}





$(document).ready(function() {

      $('#menu_links').css({

        width: '50px'

      });

      $('.collapse-menu').addClass('hidden');



      $('ul#menu_links li').hover(function() {

        $('span', this).addClass('show');

        $('span', this).removeClass('hidden');

      }, function() {

        $('span', this).addClass('hidden');

        $('span', this).removeClass('show');

      });





      $(#menu_button).click(function() {

        menuColapsado();

      });



      $('a.test').on(click, function(e) {

        $(this).next('ul').toggle();

        e.stopPropagation();

        e.preventDefault();

      });

      // });











      var clic = 1;



      function menuColapsado() {

        if (clic == 1) {

          $('#menu_links').animate({

            width: '50px'

          }, 350);

          clic = clic + 1;

          $('.collapse-menu').removeClass('show');

          $('.collapse-menu').addClass('hidden');



          $('ul#menu_links li').hover(function() {

            $('span', this).addClass('show');

            $('span', this).removeClass('hidden');

          }, function() {

            $('span', this).addClass('hidden');

            $('span', this).removeClass('show');

          });

        } else {

          $('#menu_links').animate({

            width: '200px'

          }, 350);

          clic = 1;

          $('.collapse-menu').addClass('show');

          $('.collapse-menu').removeClass('hidden');



          $('ul#menu_links li').hover(function() {



          }, function() {

            $('span', this).addClass('show');

            $('span', this).removeClass('hidden');

          });

        }

      }

<script src=https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js></script>



<button type=button id=menu_button onclick=myFunctionxxx();></button>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

mckaylab

Add To Favorites

Follow

Total Points: 311

Total Questions: 120

Total Answers: 93

Location: Montenegro

Member since Thu, Jun 16, 2022

2 Years ago

mckaylab questions

1 How to use Material UI custom variants in React with Typescript

Fri, Apr 8, 22, 00:00, 2 Years ago

1 TypeError: Cannot read properties of undefined (reading 'forEach') at Object.< anonymous> (/home/runner/myrepl/index.js:10:6

Mon, Apr 4, 22, 00:00, 2 Years ago

1 How to use the AbortController to cancel Promises in React?

Wed, Dec 1, 21, 00:00, 3 Years ago

1 How To Open HTML Date Picker Dialog On Click Anywhere Inside Input?

Mon, Apr 26, 21, 00:00, 3 Years ago

1 How to change selenium-standalone port number via webdriverio wdio file?

Wed, Jul 24, 19, 00:00, 5 Years ago

View All

answered 7 Years ago donaldcristianl · Accepted Answer

So, from what I understand, you have a button and you want to run a function the first time it is clicked and another function the second time it is clicked.

Here is a simple solution with a counter and an If statement:

var timesClicked = 0;



$("#menu_button").click(function() {

    timesClicked++;



    if (timesClicked>1) {

        //run second function

    } else {

        //run first function

    }

})

The above code will run the second function for every other time the button is clicked. You can easily change it to suit your needs if you do not want this to happen.

If you want to use every 3rd, 5th, 7th etc click as a first click and every 4th, 6th, 8th etc click as a second click, you can change the If statement and use modulo division:

var timesClicked = 0;



$("#menu_button").click(function() {

    timesClicked++;



    if (timesClicked%2==0) {

        //run second function

    } else {

        //run first function

    }

})

Check modulo division: How can I use modulo operator (%) in JavaScript?