A function that runs on the second click

Question

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>

@RokoC.Buljan Why not `document.querySelector("body")` and no JQuery? — Scott Marcus, Jun 15 '17 at 16:50
`shorter != better` when an additional library is involved for a simple operation. — Scott Marcus, Jun 15 '17 at 16:51
@ScottMarcus but he already uses a library. And if library==lessWriting+lessHeadaches.... — Roko C. Buljan, Jun 15 '17 at 16:53
This is somewhat unclear, there's a data attribute `clicked-once` being checked, but it's never changed anywhere in the posted code ? — adeneo, Jun 15 '17 at 16:55
Rodrigo, I edited a bit your question by adding a runnable and verifiable Code snippet - can you do better and 1. remove errors 2. add more HTML/CSS? — Roko C. Buljan, Jun 15 '17 at 17:03

treecon · Accepted Answer · 2021-01-25T16:18:41.770

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?

Thak you. The function is executed in the first click now, but the toggle function has stopped working and I can no longer display the menu in the third clic. — Rodrigo, Jun 15 '17 at 17:15
so, in the third click you want to run the first function again etc? — treecon, Jun 15 '17 at 17:17
I edited my answer to include your case. You can mark the answer as accepted if it gives a solution to your problem. — treecon, Jun 15 '17 at 17:47

A function that runs on the second click

1 Answers1