Change text of button once clicked using jQuery

jquery change button text onclick
jquery change button text onclick toggle
how to change button text in javascript
change button text jquery
jquery change button value onclick
jquery change submit button text
get button text jquery
toggle text jquery

I have been trying to change the text of the button once clicked but it doesn't work in one snippet where as it does in the other.

Can someone help me understand what I am missing in my code?

So the first one works but in the second code, the button text doesn't change on clicking on the button. Please help me. I have attached both the code snippets.

$(document).ready(function () {
    $("#fold").click(function () {
        $("#fold_p").fadeOut(function () {
            $("#fold_p").text(($("#fold_p").text() == 'Hide') ? 'Show' : 'Hide').fadeIn();
        })
    })
});
.button {
    display: inline-block;
    border-radius: 4px;
    background-color: #f4511e;
    border: none;
    color: #FFFFFF;
    text-align: center;
    font-size: 28px;
    padding: 20px;
    width: 200px;
    transition: all 0.5s;
    cursor: pointer;
    margin: 5px;
}

.button1 {
    background-color: white; 
    color: black; 
    border: 2px solid #4CAF50;
}

.button1:hover {
    background-color: #4CAF50;
    color: white;
}
<div id="fold">
    <button class="button button1">
        <span id="fold_p">Hide</span>
    </button>
</div>

If you toggle the JavaScript console (with F12), you will see that you got an error in the second fiddle which is :

ReferenceError: $ is not defined

This means that jQuery is not imported in the second fiddle as $ variable

EDIT 2 : To summuraize, I moved the click event to the button, and I fixed the inline if by removing the trailing space in the 'Hide ' string.

EDIT 1 : It seems there was an issue too with your js code, this one in this snippet is fixing it :

$(document).ready(function () {
    $("button").click(function () {
        $("#fold_p").fadeOut(function () {                  
            $("#fold_p").text(($("#fold_p").text() == 'Hide') ? 'Show' : 'Hide').fadeIn();
        })
    })
});
.button {
  display: inline-block;
  border-radius: 4px;
  background-color: #f4511e;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 28px;
  padding: 20px;
  width: 200px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
}

.button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.button span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.button:hover span {
  padding-right: 25px;
}

.button:hover span:after {
  opacity: 1;
  right: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button class="button">
  <div id="fold">
    <span id="fold_p">Hide</span>
  </div>
</button>

jQuery: Change button text on click, How do I change the text of a button in Swift? Change Button text in jQuery : You Can use jQuery .attr() method to change button text. You can change the button text label at run time using this method. You can change the button text label at run time using this method.

You have an error in your java script:

 $("#fold_p").text(($("#fold_p").text() == 'Hide ') ? 'Show' : 'Hide').fadeIn();//note the space after 'Hide '

should be:

 $("#fold_p").text(($("#fold_p").text() == 'Hide') ? 'Show' : 'Hide').fadeIn();//no space after 'Hide'

Swift Change UIButton text, After Click on button: The html() method: It set or return the content (innerHTML) of the selected elements. Syntax: $(selector)  We created a “click” event listener on our button. Once the button is clicked, our event handler function will be called. Inside our event handler function, we changed the text of our “message” div by using JQuery’s text method. Note that the text method will not accept HTML.

Maybe like this:

$(document).ready(function () {
    $("#fold").click(function () {        
        $("#fold_p").fadeOut(function () {
           var btn_text= '';
           if($("#fold_p").text() == 'Hide'){
              btn_text = 'Show';
           }else{
              btn_text = 'Hide';
           }        
           $("#fold_p").text(btn_text).fadeIn();
        })
    })
});
.button {
    display: inline-block;
    border-radius: 4px;
    background-color: #f4511e;
    border: none;
    color: #FFFFFF;
    text-align: center;
    font-size: 28px;
    padding: 20px;
    width: 200px;
    transition: all 0.5s;
    cursor: pointer;
    margin: 5px;
}

.button1 {
    background-color: white;
    color: black;
    border: 2px solid #4CAF50;
}

.button1:hover {
    background-color: #4CAF50;
    color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id="fold">
    <button class="button button1">
        <span id="fold_p">Hide</span>
    </button>
</div>

How to Change the Text of a Button using jQuery?, After clicking on button text and style of the button is changing on this <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>. 4​. Change Label Text on Button Click using jQuery. jQuery too provides two separate methods to assign or change an element’s text. The methods are html() and text(). The function of the methods are quite similar to the JavaScript properties that I have explained in the above section.

Button jquery onclick change text and effect, Hide Copy Code. var x = 1; $(function () { $("#<%=btnSearch.ClientID %>").click(​function () { $("#dv").slideToggle(500); if ((x % 2) != jQuery: Change button text using jQuery Last update on February 26 2020 08:07:52 (UTC/GMT +8 hours)

jquery change button text on click, Please visit http://www.technomark.in/Change-Button-Text-Using-jQuery.aspx for more Duration: 2:49 Posted: Jul 4, 2016 In jquery we use .val() method for changing the text of button, and if the button is div tag then for div tag we have to change its text then we use .text() method. Add a button tag, and on button click will amend its text.

Change Button Text Using jQuery, Change button text using jQuery. Sample Solution: HTML Code : <!DOCTYPE html> <html> <head> <script src="https://code. The following code example is using the JavaScript to change the text of the button. Example Code [JavaScript] You can also use the jQuery to change the text of the existing input control by using the .val() method. The following code example is using the jQuery to change the text of the button.

Comments
  • Umm I still see the text not changing on click
  • @AakankshaChoudhary I have added a snippet, tell me if it's what you are looking for.
  • Just for clarity, he moved the click event to the button, and he fixed the inline if by removing the trailing space in the 'Hide ' string $("#fold_p").text() == 'Hide '.
  • Also, as an aside, it can be good to keep in mind that every time you do $('selector') it is actually running a function to find the element in the DOM. So it's much better if you know you're going to be using the same element several times to do var foldP = $('#fold_p'); and then use the variable from that point forward.
  • @PierreCapo - you should add the explanations that David784 gave to your answer, so the full answer does not depend on reading the comments too.
  • Note: I could not get this to run in fiddle, prob. due to js error noted above by Pierre Capo. But when I run this code locally, it worked for me. This was the only change.
  • So the first code works anyway, the second one doesnt @mscdeveloper
  • Yeah I mean my first code did give hide and show but the second one didnt @mscdeveloper