Javascript - When a button is clicked the CSS property toggle after second click

Question

I am working on a simple Play and Pause button code with Javascript. The script is toggling the CSS property; however, after a delay. At the moment, the toggle happens on second click. Not sure what the issue is.

   $(document).click(function () {
      $("#startClock").click(function () {
          $("#startClock").css("display", "none");
          $("#stopClock").css("display", "block");
      });
      $("#stopClock").click(function () {
          $("#stopClock").css("display", "none");
          $("#startClock").css("display", "block");
      });
});

#stopClock {
  display: none; 
}

#startClock {
  display: block;   
}

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js?ver=4.1'></script>
<button id=startClock >Start</button>
<button id=stopClock >Pause</button> <br/>

change document.click to document.ready

cheralathan
– cheralathan

2016-07-15 11:50:11 +00:00
Commented Jul 15, 2016 at 11:50 — cheralathan
– cheralathan, Commented Jul 15, 2016 at 11:50
You all are awesome.. Thanks!

Milind
– Milind

2016-07-15 12:21:09 +00:00
Commented Jul 15, 2016 at 12:21 — Milind
– Milind, Commented Jul 15, 2016 at 12:21

vijayP · Accepted Answer · 2016-07-15 11:56:49Z

4

Instead of $(document).click go for $(document).ready

$(document).ready(function () {
	    $("#startClock").click(function () {
	        $("#startClock").css("display", "none");
	        $("#stopClock").css("display", "block");
	    });
	    $("#stopClock").click(function () {
	        $("#stopClock").css("display", "none");
	        $("#startClock").css("display", "block");
	    });
	});

#stopClock {
  display: none; 
}

#startClock {
  display: block;   
}

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js?ver=4.1'></script>
<button id=startClock >Start</button>
<button id=stopClock >Pause</button> <br/>

It was happening because on first click which was getting listen by document; the click event handler were getting attached to your button. Hence needed 2 clicks for the CSS animation.

edited Jul 15, 2016 at 11:56

answered Jul 15, 2016 at 11:50

vijayP

11.5k5 gold badges28 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

pesoklp13 · Accepted Answer · 2016-07-15 11:50:53Z

	$(document).ready(function() {
			$("#startClock").click(function() {
				$("#startClock").css("display", "none");
                                $("#stopClock").css("display", "block");
			});
			$("#stopClock").click(function() {
				$("#stopClock").css("display", "none");
                                $("#startClock").css("display", "block");
			});
		});

#stopClock {
  display: none; 
}

#startClock {
  display: block;   
}

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js?ver=4.1'></script>
<button id=startClock >Start</button>
<button id=stopClock >Pause</button> <br/>

Because at first you first time clicked it twice cause of click inside of click event. You clicked document and after clicked button.

Patrick DiGiovanni · Accepted Answer · 2016-07-15 11:51:08Z

0

what if you change

$(document).click(function() {

to

$(document).ready(function() {

I can't see the context but it looks like you have two nested click listeners.

answered Jul 15, 2016 at 11:51

Patrick DiGiovanni

162 bronze badges

Comments

Community · Accepted Answer · 2020-06-20 09:12:55Z

Issue is you have wrapped code inside $(document).click It should be $(document).ready()

Sample

$(document).ready(function() {
  $("#startClock").click(function() {
    $("#startClock").css("display", "none");
    $("#stopClock").css("display", "block");
  });
  $("#stopClock").click(function() {
    $("#stopClock").css("display", "none");
    $("#startClock").css("display", "block");
  });
});

#stopClock {
  display: none;
}
#startClock {
  display: block;
}

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js?ver=4.1'></script>
<button id=startClock>Start</button>
<button id=stopClock>Pause</button>
<br/>

You should avoid using style attribute. Rather you should use class. If you switch to class approach, you can use, toggleClass or addClass/removeClass functions to update visibility.

Sample

$(document).ready(function() {
  $("#startClock, #stopClock").click(function() {
    $("#startClock").toggleClass("hide");
    $("#stopClock").toggleClass("hide");
  });
});

.hide{
  display:none
}

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js?ver=4.1'></script>
<button id="startClock">Start</button>
<button id="stopClock" class="hide">Pause</button>
<br/>

Sagar Naliyapara · Accepted Answer · 2016-07-15 11:51:55Z

0

Try this one,

Using preventDefault you can do it.

$(document).ready(function () {
    $("#startClock").click(function (e) {
        e.preventDefault();
        $("#startClock").css("display", "none");
        $("#stopClock").css("display", "block");
    });
    $("#stopClock").click(function (e) {
        e.preventDefault();
        $("#stopClock").css("display", "none");
        $("#startClock").css("display", "block");
    });
});

answered Jul 15, 2016 at 11:51

Sagar Naliyapara

4,2015 gold badges43 silver badges62 bronze badges

1 Comment

pesoklp13 Over a year ago

I think in this example is preventDefault not necessary, but i agree thats this is a good pattern to use it if sometimes it will be used inside of form or binded on anchor.

Collectives™ on Stack Overflow

Javascript - When a button is clicked the CSS property toggle after second click

5 Answers 5

Comments

Comments

Comments

Sample

Sample

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Sample

Sample

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related