Why triggering second event "onmouseup" is getting error !

Question

When i click on the button it is working, but when i release the button second event "onmouseup" is triggered and ajax function is getting error. Is there anything wrong in the script ?

 

<button id="myP" onmousedown="mouseDown_b()" onmouseup="mouseUp_b()">Click Me</button>

 

<script>

                function mouseDown_b() {
                    //e.preventDefault();
                    document.getElementById("myP").style.color = "red";

                    $.ajax({
                        type: "POST",
                        url: "Default.aspx/testMethod_a",
                        data: "{ currentState: 1 }",
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        //async:false,
                        success: function () {
                            console.log("success1");
                        },
                        error: function () {
                            alert("error");
                        }
                    });

                }

                function mouseUp_b() {
                    //e.preventDefault();
                    document.getElementById("myP").style.color = "green";

                    $.ajax({
                        type: "POST",
                        url: "Default.aspx/testMethod_a",
                        data: "{ currentState: 2 }",
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        //async:false,
                        success: function () {
                            console.log("success2");
                        },
                        error: function () {
                            alert("2nd_error");
                        }
                    });
                }
            </script>