.addClass using else if statements - jQuery?

Question

I'm very new to JavaScript and jQuery. I want to make the white button at the top change color after these list of colors is pressed. For example, when the pink button is pressed, the white button turns pink, and then when the purple button is pressed, it changes to purple:

https://i.stack.imgur.com/q4zA0.png

I've managed to get it to work when the pink button is pressed using this function that selects the ids of the li element and the .addClass() method.

//When clicking diff colours
$("ul").on("click", "li", function(){
    if ($("li").is("#p")) {
        $("button").addClass("pink");
    } else if ($("li").is("#pu")) {
        $("button").addClass("purple");
    }
    color = $(this).css("background-color");
});

However, using else if doesn't seem to work when, for example, pressing the purple button.

Here is the HTML snippet:

<div id="colorSelect">
    <ul>
        <li class="pink" id="p"></li>
        <li class="purple" id="pu"></li>
        <li class="red" id="r"></li>
        <li class="blue" id="b"></li>
        <li class="green" id="g"></li>
        <li class="orange" id="o"></li>
    </ul>
</div>

Answer 1

 //When clicking diff colours $("ul").on("click", "li", function() { $("button").removeAttr('class').addClass($(this).attr('class')) }); 

 .white { background-color: white } .pink { background-color: pink } .purple { background-color: purple } .red { background-color: red } .blue { background-color: blue } .green { background-color: green } .orange { background-color: orange } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="colorSelect"> <ul> <li class="pink" id="p">pink</li> <li class="purple" id="pu">purple</li> <li class="red" id="r">red</li> <li class="blue" id="b">blue</li> <li class="green" id="g">green</li> <li class="orange" id="o">orange</li> </ul> </div> <button>button</button> 

Assuming the li has only one class

Answer 2

The result is expected as $('li').is("#p") will always evaluate to true as it will evaluate against all li element not the current element.

You need to use current element context ie this instead of li when evaluating it.

//When clicking diff colours
$("ul").on("click", "li", function(){
    if ($(this).is("#p")) {
        $("button").addClass("pink");
    } else if (this).is("#pu")) {
        $("button").addClass("purple");
    }
    color = $(this).css("background-color");
});

It would be better to use ID

//When clicking diff colours
$("ul").on("click", "li", function(){
    if (this.id == "p") {
        $("button").addClass("pink");
    } else if (this.id == "pu") {
        $("button").addClass("purple");
    }
    color = $(this).css("background-color");
});

Answer 3

That's because you always refer to the first li instead of the pressed one:

$("ul").on("click", "li", function(){
    if ($(this).is("#p")) {
        $("button").addClass("pink");
    } else if ($(this).is("#pu")) {
        $("button").addClass("purple");
    }
    color = $(this).css("background-color");
});

Answer 4

To solve this you can make the code simpler by applying the class of the clicked element directly to the <button> . This avoids the need for the if statement at all. Try this:

 //When clicking diff colours $("ul").on("click", "li", function() { $('button').removeClass().addClass(this.className); }); 

 button { width: 50px; height: 50px; border-radius: 50%; border: 0; } .pink { background-color: pink; } .purple { background-color: purple; } .red { background-color: red; } .blue { background-color: blue; } .green { background-color: green; } .orange { background-color: orange; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button></button> <div id="colorSelect"> <ul> <li class="pink" id="p"></li> <li class="purple" id="pu"></li> <li class="red" id="r"></li> <li class="blue" id="b"></li> <li class="green" id="g"></li> <li class="orange" id="o"></li> </ul> </div>