Javascript-当单击按钮时，第二次单击后切换CSS属性

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/> 

Answer 1

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.

Answer 2

  $(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.

Answer 3

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.

Answer 4

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/> 

Answer 5

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");
    });
});