Andrew Nguyen Andrew Nguyen - 3 months ago 8
CSS Question

Issues with if/else-if statement not adding class

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();

dMd dMd
Answer

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();
Comments