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>

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>

• javascript
• jquery
• html

• It should be $("#myButton").text() not just $("#myButton").text – Bharat Commented Mar 17, 2017 at 13:18
• 1 .text() is function – abhishekkannojia Commented Mar 17, 2017 at 13:19

6 Answers 6

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./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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

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

Try this:

$("#myButton").val($("#myButton").val() === "Hide table" ? "Show table" : "Hide table");

use this to change the text of your button

$("#myButton").attr('value', 'newText');

I have to tweak your code and worked for me.You have to pass the vale like $("#myButton").val(Buttontext);

$(document).ready(function() {
  $("#myButton").click(function() {
    $(".myTable").toggle(1000, "linear", function changeButtonText() {

    var text= ($("#myButton").val() === "Hide table" ? "Show table" : "Hide table");
    $("#myButton").val(text);
    });
  });
});

fiddle work for me

you can use if statement to check the value of your button but first you must get the attribute which is value.

$("#myButton").click(function () {
    $(".myTable").toggle(1000, "linear", function changeButtonText() {
        var text = $("#myButton").attr("value");
      if(text == "Hide table") {
        $("#myButton").attr("value","Show table");
      }
      else {
        $("#myButton").attr("value","Hide table");
      }
    });
});

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


... 

<button id="myButton">Hide table</button>
<table class="myTable">
    <tr><td>works</td></tr>
</table>
<script>
            $("#myButton").click(function () {
            
                if($("#myButton").text() == "Hide table") { 
                  $(".myTable").hide();
                  $("#myButton").text("Show table");
                } 
                else {
                  $(".myTable").show();
                  $("#myButton").text("Hide table");
                }
                
            });
    </script>

Put the javascript at the bottom of your body delete the ready function this works for me