jQuery \ Javascript - if statement does not evaluate correctly

Question

I'm building a webpage with the following codes:

function change () 
{
    if($(this).hasClass("rosaLC"));
    {
        $(this).toggleClass('rosaLCb');
    }
    if ($(this).hasClass('rosaBC'));
    {
        $(this).toggleClass('rosaBCb'); 
    }
}

On the html, the buttons that trigger this function is the follow:

<div class="row">
    <article class="columnLeft">
        <div class=rosa>    
            <button onclick="playVid('crux');change.call(this)" class=rosaLC style="top:28px; left:75px;" ></button>
            <button onclick="playVid('gloria');change.call(this)" class=rosaBC style="top:460px; right:131px;"></button>
        </div>
    </article>
</div>

But, when the function change() is called, the if statement does not evaluate correctly, that is, when the <button> of class rosaLC is clicked, the function change () add to it both classes rosaLCb and rosaBCb, and the original class rosaLC does not come toggled, the button still with the 3 classes: <button onclick="playVid('crux');change.call(this)" class="rosaLC rosaLCb rosaBCb" style="top:20px; left:86px;"></button>

What is wrong?

As a workaround I have split the function in two functions:

function change (thisObj) 
{
    $(thisObj).toggleClass('rosaLC rosaLCb');

}
function change1 (thisObj) 
{
    $(thisObj).toggleClass('rosaBC rosaBCb');
}

And change the html button:

<button onclick="playVid('gloria');change1(this)" class=rosaBC style="top:36px; right:58px;"></button>
<button onclick="playVid('crux');change(this)" class=rosaLC style="top:28px; left:75px;" ></button>

This is the only way that work as I wish, but I still not understanding what is wrong with the original code, mainly concerning the if statement.

gurvinder372 · Accepted Answer · 2016-03-04 13:32:19Z

1

You are not defining what to toggle it with

Simply do this

function change () 
{
        $(this).toggleClass('rosaLC rosaLCb');
        $(this).toggleClass('rosaBC rosaBCb'); 
}

Also, pass the element object rather than using this since then it becomes reusable for purpose other than button click (some other event on another element)

function change (thisObj) 
{
        $(thisObj).toggleClass('rosaLC rosaLCb');
        $(thisObj).toggleClass('rosaBC rosaBCb'); 
}

and invoke it as

<button onclick="playVid('crux');change(this)" class=rosaLC style="top:28px; left:75px;" ></button>

edited Mar 4, 2016 at 13:32

answered Mar 4, 2016 at 13:27

gurvinder372

68.6k11 gold badges78 silver badges98 bronze badges

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

3 Comments

Rajaprabhu Aravindasamy Over a year ago

change.call(this) will not expect the function to receive this explicitly. I wrongly posted an answer before seeing OP's code

gurvinder372 Over a year ago

@RajaprabhuAravindasamy hmm, i have made the change. I was wondering why you deleted yours.

Leandros López Over a year ago

@gurvinder372 I just try your solution, but still adding all the classes to whatever button I click.

Collectives™ on Stack Overflow

jQuery \ Javascript - if statement does not evaluate correctly

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related