Issues with if/else-if statement not adding class

Question

Objective

I have a list of 60 hockey players. When the maximum number of players from each position (goalies, defencemen, forwards) are picked two things should happen:

The class of is-completed is added to icon-checkmark, which should turn it from grey to yellow to show that task is completed
Other players of that position that have not been selected should be unable to be clicked due to .css() pointer-events: none

Problem

a) The class is-completed is only being added to checkmark--goalie, but not the other checkmarks which relate to the other positions, so I have a feeling there is something wrong with the if/else-if statement.

b) Even if the max number of players in their positions (2 goalies, 6 defencemen, 12 forwards) are picked, you are still able to click additional players with the class is-inactive

index.html

// Checkmarks
        <section class="main__selected">
            <p class="main__check"><i class="icon-checkmark checkmark--goalie fa fa-check" aria-hidden="true"></i>Pick 2 out of 10 of the goalies</p>
            <p class="main__check"><i class="icon-checkmark checkmark--defencemen fa fa-check" aria-hidden="true"></i>Pick 6 out of the 20 defencemen</p>
            <p class="main__check"><i class="icon-checkmark checkmark--forward fa fa-check" aria-hidden="true"></i>Pick 12 of the 30 forwards</p>
        </section> <!-- .main__selected -->


// Player
    <div class="player player--goalie year--1990">
                    <div class="tooltip tooltip--tall">
                        <p class="tooltip__name">Brian Elder</p>
                        <p class="tooltip__hometown"><span>Hometown:</span> Oak Lake, Man.</p>
                        <p class="tooltip__years"><span>Years Played:</span> 1992-1997</p>
                        <div class="tooltip__stats--inline">
                            <div class="stats__group stats--goalsag">
                                <p class="stats__header">GA</p>
                                <p class="stats__number">2.00</p>
                                <p class="stats__number">3.12</p>
                                <p class="stats__number">3.46</p>
                                <p class="stats__number">2.70</p>
                            </div>

                            <div class="stats__group stats--save">
                                <p class="stats__header">SAV%</p>
                                <p class="stats__number">.909</p>
                                <p class="stats__number">.886</p>
                                <p class="stats__number">.884</p>
                                <p class="stats__number">.906</p>
                            </div>

                            <div class="stats__group stats--shutouts">
                                <p class="stats__header">SO</p>
                                <p class="stats__number">0</p>
                                <p class="stats__number">0</p>
                                <p class="stats__number">3</p>
                                <p class="stats__number">2</p>
                            </div>
                        </div> <!-- tooltip__stats--inline -->
                    </div> <!-- tooltip -->
                    <div class="player__headshot player--elder">
                        <div class="picked is-inactive"><i class="fa fa-star" aria-hidden="true"></i></div>
                    </div>
                    <p class="player__name">Brian Elder</p>
                    <p class="player__position">Goalie</p>
                </div>

scripts.js (snippet)

/*-------------------------------------
COUNT SELECTED
--------------------------------------*/

function countSelected() {
    $(".player").on("click", function(){

        // Count the number of players with stars
        var starredGoaltenders = $(".player--goalie").find(".picked.is-active").length;
        var starredDefencemen = $(".player--defencemen").find(".picked.is-active").length;
        var starredForwards = $(".player--forward").find(".picked.is-active").length;

        console.log(starredGoaltenders, starredDefencemen, starredForwards);

        // The number of starred players for each position cannot exceed the following numbers
        var maxGoaltenders = 2;
        var maxDefencemen = 6;
        var maxFowards = 12;

        // If the number of starred players hits its max, the other unstarred players in that group cannot be clicked unless one is deselected first

        if (starredGoaltenders === maxGoaltenders) {
            $(".checkmark--goalie").addClass("is-completed");
            $(".player--goalie").find(".picked.is-inactive").css("pointer-events", "none");
        } else if (starredDefencemen === maxDefencemen) {
            $(".checkmark--defencemen").addClass("is-completed");
            $(".player--defencemen").find(".picked.is-inactive").css("pointer-events", "none");
        } else if (starredForwards === maxFowards) {
            // Not working unless done first?
            $(".checkmark--forward").addClass("is-completed");
            $(".player--forward").find(".picked.is-inactive").css("pointer-events", "none");
        }
    });
} countSelected();

Andrew Nguyen · Accepted Answer · 2016-08-06 08:50:34Z

1

chao ban,

part a) As Simon says, ha ha, the condition is handling only one true condition and it doesn't care about the other after the first "true" condition is met. They can all be true at once, so just break it into 3 if-statements

part b) Click EventListener is on "player" class, you set pointer-events to .picked.is-inactive ... therefore you must check at the top of the click event:

if ($(this).find('.picked.is-inactive').css('pointer-events') === "none") return;

Final Solution

    function countSelected() {
        $(".player").on("click", function(){

            // Checks if the maximum number of players have been selected
            // If so, return false and then do nothing
            // If not, the class will toggle from `is-inactive` to `is-active`
            if ($(this).find(".picked.full").length > 0) return false;
            $(this).find(".picked").toggleClass("is-inactive is-active");

            // Count the number of players with stars
            var starredGoaltenders = $(".player--goalie").find(".picked.is-active").length;
            var starredDefencemen = $(".player--defencemen").find(".picked.is-active").length;
            var starredForwards = $(".player--forward").find(".picked.is-active").length;

            console.log(starredGoaltenders, starredDefencemen, starredForwards);

            // The number of starred players for each position cannot exceed the following numbers
            var maxGoaltenders = 2;
            var maxDefencemen = 6;
            var maxFowards = 12;

            // If the number of starred players hits its max, a class of `is-completed` is adding to the corresponding checkmark to indicate that the task has been completed
            // Class of `full` is a placeholder, but it also removes the cursor:pointer
            if (starredGoaltenders === maxGoaltenders) {
                $(".checkmark--goalie").addClass("is-completed");
                $(".player--goalie").find(".picked").addClass("full");
            }

            if (starredDefencemen === maxDefencemen) {
                $(".checkmark--defencemen").addClass("is-completed");
                $(".player--defencemen").find(".picked").addClass("full");
            }

            if (starredForwards === maxFowards) {
                $(".checkmark--forward").addClass("is-completed");
                $(".player--forward").find(".picked").addClass("full");
            }
        });
} countSelected();

edited Aug 6, 2016 at 8:50

Andrew Nguyen

1,4364 gold badges22 silver badges45 bronze badges

answered Aug 6, 2016 at 6:17

user6683818

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

7 Comments

Andrew Nguyen Over a year ago

Where would I be putting this if ($(this).find('.picked.is-inactive').css('pointer-events') === "none") return; outside the if-else statements?

user6683818 Over a year ago

I am guessing you have another $(".player").click event that adds .picked.is-active right? just right before you set it to is-active.

Andrew Nguyen Over a year ago

I have a click handler that looks like ` $(".player").on("click", function(){ $(this).find(".picked").toggleClass("is-inactive is-active"); });`

user6683818 Over a year ago

oh wait is it default on start to be "picked is-active" ?

Andrew Nguyen Over a year ago

Default is picked.is-inactive

|

Simon Schüpbach · Accepted Answer · 2016-08-06 05:43:45Z

You should changes your if/ese condition to

if (starredGoaltenders === maxGoaltenders) {
      $(".checkmark--goalie").addClass("is-completed");
      $(".player--goalie").find(".picked.is-inactive").css("pointer-events", "none");
}
else {
     $(".checkmark--goalie").removeClass("is-completed");
     $(".player--goalie").find(".picked.is-inactive").css("pointer-events", "auto");
}

if (starredDefencemen === maxDefencemen) {
     $(".checkmark--defencemen").addClass("is-completed");
     $(".player--defencemen").find(".picked.is-inactive").css("pointer-events", "none");
}
else {
     ...
}

if (starredForwards === maxFowards) {
     // Not working unless done first?
     $(".checkmark--forward").addClass("is-completed");
     $(".player--forward").find(".picked.is-inactive").css("pointer-events", "none");
}
else {
     ...
}

The problem was, that if the first condition was true, the other aren't processed anymore. You should also add an else for every if condition, to get the changes reverted if the user deselect an active player.

Collectives™ on Stack Overflow

Issues with if/else-if statement not adding class

Objective

Problem

index.html

scripts.js (snippet)

2 Answers 2

Final Solution

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Objective

Problem

index.html

scripts.js (snippet)

2 Answers 2

Final Solution

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related