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>
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" />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');