Change text string with Jquery

Question

I am trying to change/revert a text string when a link is clicked with Jquery. Now the first statement of this code works fine, but the the other one doesn't. Can someone please help figure out what's going wrong here?

<script>
  $("document").ready(function(e) {
    $("#newMessagelink").click(function(e) {
      $("#new-msg").toggle();
      if($("#newMessagelink").text("New Message") {
        $("#newMessagelink").text("Back to Inbox");
      } else if($("#newMessagelink").text("Back to Inbox")) {
        $("#newMessagelink").text("New Message");
      }                     
    })
  });
</script>

thanks!

What does $("#newMessagelink").text("New Message") supposed to do? If you want to check that #newMessagelink has text "New Message" you should use $("#newMessagelink").text() == "New Message" — yname
– yname, Commented Mar 5, 2016 at 7:52

Rajaprabhu Aravindasamy · Accepted Answer · 2016-03-05 07:59:35Z

2

Try to use .text() properly,

$("document").ready(function(e) {
  $("#newMessagelink").click(function(e) {
    $("#new-msg").toggle();
    var txt = $(this).text();
    $(this).text(txt == "New Message" ? "Back to Inbox" : "New Message");
  });
});

.text("something") will return a jquery wrapper object. If you pass it in a if statement, then it always evaluates to true. So fetch the text of the target element and check it properly.

Also you had some syntax errors like, not closing the opened parenthesis etc. Its better to see your console once before bringing your issues to other's attention.

DEMO

edited Mar 5, 2016 at 7:59

answered Mar 5, 2016 at 7:52

Rajaprabhu Aravindasamy

67.2k17 gold badges107 silver badges133 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

user3772369 Over a year ago

So I tried your code, the idea behind using this code is to for a link to display "New Message" text by default. Once clicked, it should display "Back to Inbox". Then then when "Back to Inbox" is clicked, it reverts back to New Message.

Rajaprabhu Aravindasamy Over a year ago

@user3772369 Yes exactly. That is what you want. Right?

user3772369 Over a year ago

Yes, but with your code, when I implement it, it does not work on the first click for some reason. It works fine on the second click click and onwards.

Rajaprabhu Aravindasamy Over a year ago

@user3772369 Does not work in the sense? Can you elaborate?

user3772369 Over a year ago

Sure, so when I run the application, by default, the text says "New Message" When I click on it, it hides a couple of things which I want, but does not change the text to "Back to Inbox". At this point, the text remains "New Message". However, when I click again, it un-hides the divs that I want, and changes the text to "Back to Inbox".

|

Pranav C Balan · Accepted Answer · 2016-03-05 07:57:00Z

Your if statement will be always true since text(string) returns jQuery object always. Instead you can do something simple using text() with callback. Also you can use this instead of #newMessagelink selector, since inside the click handler this refers to #newMessagelink.

$("document").ready(function(e) {
  $("#newMessagelink").click(function(e) {
    $("#new-msg").toggle();
    $(this).text(function(i, text) {
      return text == "Back to Inbox" ? "New Message" : "Back to Inbox";
    });
  })
});

with your own code change the if condition properly

$("document").ready(function(e) {
    $("#newMessagelink").click(function(e) {
      $("#new-msg").toggle();
      var text= $(this).text();
      if(text=="New Message") {
        $(this).text("Back to Inbox");
      } else if(text=="Back to Inbox") {
        $(this).text("New Message");
      }                     
    })
});

Collectives™ on Stack Overflow

Change text string with Jquery

2 Answers 2

DEMO

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related