CODEWITHSUNDEEP
javascriptasp.net-mvc-3
user1668543
user1668543

Reputation: 309

How to change text of <p> using Jscript ?

I am developing MVC application and using razor syntax.

In this application I am giving comment facility.

I use

show comments

para.

<p id="ClassPara" class="ShowComments" onclick="chkToggle()">Show Comments</p>

Now , when user click on 'Show comments' , I toggle the Div , In that div I show comments.

Now , I want to change the Text of the para To 'Hide Comment' from 'Show Comments' , When user click on that para.

but I am unable to change the text to 'Hide comments'...It keep showing 'Show Comments' How to do that ?

my code is....

<script src="../../Scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $(".ShowComments").click(function () {
            $(".ParentBlock").slideToggle("slow");
            if ($('.ShowComments').text = "Show Comments"
            {
               $('.ShowComments').text('Hide');
            }
            else
            {
               $('.ShowComments').text('Show Comments');
            }
        });
    });
</script>

Upvotes: 0

Views: 509

Answers (2)

thecodeparadox
thecodeparadox

Reputation: 87073

You can use a callback function to .text() method like below and ease you code.

$(document).ready(function() {
    $(".ShowComments").click(function() {

        $(".ParentBlock").slideToggle("slow");

        // here instead of .ShowComments you should use
        // this, where this refers to clicked element

        $(this).text(function(i, oldText) {
            return oldText == 'Show Comments' ? 'Hide' : 'Show Comments';
        });
    });
});​

Upvotes: 1

Mark
Mark

Reputation: 5720

.text isn't a property its a method

.text("Show Comments") or .text("hide Comments")

for comparison its .text() === "Show Comments"

Updated your code and fixed a few errors.

<script src="../../Scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $(".ShowComments").click(function () {
            $(".ParentBlock").slideToggle("slow");
            if ($('.ShowComments').text() === "Show Comments")
            {
               $('.ShowComments').text('Hide');
            }
            else
            {
               $('.ShowComments').text('Show Comments');
            }
        });
    });
</script>

You are also using an assignment operator and not a comparison operator in your if condition. == or === not =

Upvotes: 1

Related Questions