4

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>
2
  • It should be $("#myButton").text() not just $("#myButton").text
    – Bharat
    Mar 17, 2017 at 13:18
  • 1
    .text() is function Mar 17, 2017 at 13:19

6 Answers 6

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

1
  • It's an input tag and not button
    – Mr. Alien
    Mar 17, 2017 at 13:23
5

Try this:

$("#myButton").val($("#myButton").val() === "Hide table" ? "Show table" : "Hide table");
6
  • No it's not, mine works. $("#myButton").val(...), you have $("#myButton").val() = ....
    – Arg0n
    Mar 17, 2017 at 13:31
  • @Waxi maybe you didn't see my answer ^^ Mar 17, 2017 at 13:33
  • @Ionut You set the value by passing it INTO the val() method, not by assigning a value TO the val() method.
    – Waxi
    Mar 17, 2017 at 13:34
  • @Waxi thanks for clarifying, he has a hard time understanding :)
    – Arg0n
    Mar 17, 2017 at 13:34
  • @Arg0n Thanks. This is indeed the only working answer.
    – Eutherpy
    Mar 17, 2017 at 13:36
2

use this to change the text of your button

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

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

0

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

<script src="https://ajax.googleapis.com/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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.