Change button text in jQuery

Question

I have a table which I want to hide or show on the click of a button. Also, when the button is clicked, its text should be changed appropriately. I have the following code, but the button's text is not being changed:

<script>
        $(document).ready(function () {
            $("#myButton").click(function () {
                $(".myTable").toggle(1000, "linear", function changeButtonText() {
                    $("#myButton").text = ($("#myButton").text === "Hide table" ? "Show table" : "Hide table");
                });
            });
        });
</script>

... 

<input type="button" id="myButton" value="Hide table" />
<table class="myTable">
    ...
</table>

Answer 1

You didn't use the function in the right way:

---

• If the element is button:

Error:

$("#myButton").text = ("new text");

Work:

$("#myButton").text("new text");

Working example:

$("#myButton").text("New text");

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

<button type="button" id="myButton">Old text</button>

---

• If the element is input type="button":

Error:

$("#myButton").text = ("new text");

Work:

$("#myButton").val("new text");

Working example:

$("#myButton").val("New text");

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

<input type="button" id="myButton" value="Hide table" />