jQuery function parameters not working properly

Question

I have the following script:

<!doctype HTML>
<html lang = "en">
    <head>
        <title>Learn jQuery</title>
        <link rel = "stylesheet" href = "CSS/style.css">
        <script type = "text/javascript" src = "scripts/java.js"></script>
        <script type = "text/javascript" src = "scripts/jquery.js"></script>
    </head>
    <body>
        <div id = "main">Click to Show and Hide <button id = "btnA">+</button></div>
        <div id = "box">Some content.</div>
        <script>
            $(document).ready(function()
            {
                $("#btnA").click(function()
                {
                    $("#box").slideToggle(2000);

                    // code block in question
                    if  (val == "+")
                    {
                        $(this).html("-");
                    }
                    else if  (val == "-")
                    {
                        $(this).html("+");
                    }
                });
            });
        </script>
    </body>
</html>

I wish to transform the code block in question into a re-usable function like this:

function toggleContent(target, contentA, contentB)
{
    var val = $(target).html();
    if  (val == contentA)
    {
        $(this).html(contentB);
    }
    else if (val == contentB)
    {
        $(this).html(contentA);
    }
}

However when I call toggleContent("#btnA", "+", "-");, it doesn't work. Could someone point out my error? TIA.

The suggested changes so far does not work, even the DEMO. Could someone help?

Change $(this) to $(target)

Arkadiusz G.
– Arkadiusz G.

2018-11-30 06:06:23 +00:00
Commented Nov 30, 2018 at 6:06 — Arkadiusz G.
– Arkadiusz G., Commented Nov 30, 2018 at 6:06
@ArkadiuszG., it doesn't work.

J. Doe
– J. Doe

2018-11-30 11:13:16 +00:00
Commented Nov 30, 2018 at 11:13 — J. Doe
– J. Doe, Commented Nov 30, 2018 at 11:13

Kiranramchandran · Accepted Answer · 2018-11-30 11:13:26Z

1

Arkadiusz G's comment may give you the answer.

Change

function toggleContent(target, contentA, contentB)
{
    var val = $(target).html();
    if  (val == contentA)
    {
        $(this).html(contentB);
    }
    else if (val == contentB)
    {
        $(this).html(contentA);
    }
}

To

function toggleContent(target, contentA, contentB)
{
    var val = $(target).html();
    if  (val == contentA)
    {
        $(target).html(contentB);
    }
    else if (val == contentB)
    {
        $(target).html(contentA);
    }
}

UPDATE

And also add this

$(function(e){
$('body').on('click','#btnA','',function(){
   toggleContent("#btnA", "+", "-");
});

});

DEMO HERE

edited Nov 30, 2018 at 11:13

answered Nov 30, 2018 at 6:26

Kiranramchandran

2,09416 silver badges30 bronze badges

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

6 Comments

J. Doe Over a year ago

Wow! It works. Could you explain to me why it doesn't work it I just call $("#btnA").click(function(){$("#box").slideToggle(2000); toggleContent("#btnA", "+", "-");}); in the main script?

J. Doe Over a year ago

It does on your demo, friend. But when I put it into my HTML, it doesn't.

Kiranramchandran Over a year ago

may be some other scripts stops it. do you have any error in developer console?

J. Doe Over a year ago

It says this: Uncaught ReferenceError: something is not defined at HTMLButtonElement.<anonymous> (index.html:21) at HTMLButtonElement.dispatch (jquery.js:5183) at HTMLButtonElement.elemData.handle (jquery.js:4991)

Kiranramchandran Over a year ago

i beleive toggleContent function is outside document.ready

|

Alejandro Lariccia · Accepted Answer · 2018-11-30 06:31:32Z

1

Inside the function "toggleContent", the "this" object is not what you think, try this way:

function toggleContent(target, contentA, contentB)
    {
        var val = $(target).html();
        if  (val == contentA)
        {
            $(target).html(contentB);
        }
        else if (val == contentB)
        {
            $(target).html(contentA);
        }
    }

answered Nov 30, 2018 at 6:31

Alejandro Lariccia

3691 silver badge3 bronze badges

Comments

Negi Rox · Accepted Answer · 2018-11-30 06:11:00Z

0

Hi if you want to convert it to function pass currentObj also to the function.

function toggleContent(currentObj,target, contentA, contentB)
{
    var val = $(target).html();
    if  (val == contentA)
    {
        currentObj.html(contentB);
    }
    else if (val == contentB)
    {
        currentObj.html(contentA);
    }
} 
toggleContent($(this), $("#btnA"), "contentA", "contentB")

answered Nov 30, 2018 at 6:11

Negi Rox

3,9421 gold badge14 silver badges18 bronze badges

Collectives™ on Stack Overflow

jQuery function parameters not working properly

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related