Andrew Nguyen Andrew Nguyen - 2 months ago 4
Javascript Question

Text of two strings not matching on click

Objective




  • I'm trying to compare the text of two strings — the first being the
    text in a list containing spans. It's default text reads "Pick a defenseman" and then the name of the player just clicked.

  • The aim is to make it so that names of hockey players clicked on only
    replace the default text and get added to this list once, as opposed to multiple times.



Problem



When I
console.log()
I still see the default text, despite the player's name being added to the span. As a result, when I used an if-statement that included
spanText !== playerName
I'm still able to add the same player multiple times, but I'm unsure why this is only happening with
.player--defenseman
not the other positions

scripts.js



$(".player").click(function(){

// Select the current player
var player = $(this);

// Count number of players of each position that have been clicked
var pickedF = $(".player--forward.is-selected").length;
var pickedD = $(".player--defenseman.is-selected").length;
var pickedG = $(".player--goalie.is-selected").length;

// Grab the name of the player last clicked
playerName = player.find(".player__name").text();

// Literally magic.
$(".btn--add").unbind("click");

$(".btn--add").click(function(){

// Ensures names don't match
var spanText = $(".player__pick").eq(0).text();

// Changes the opacity of a picked player to 0.5
player.addClass("is-selected");

if (player.hasClass("player--forward")) {
if (spanText !== playerName) {
$(".player__pick--forward.is-empty").eq(0).html(playerName);
$(".player__pick--forward.is-empty").eq(0).removeClass("is-empty");

if (pickedF < 2) {
pickedF++;
}

if (pickedF === 2) {
$(".player--forward").not(":has(.is-selected)").css("pointer-events", "none");
console.log("Locked forwards");
} else {
$(".player--forward").css("pointer-events", "auto");
}
}
}

// Something is wonky here
if (player.hasClass("player--defenseman")) {
if (spanText !== playerName) {
$(".player__pick--defenseman.is-empty").eq(0).html(playerName);
$(".player__pick--defenseman.is-empty").eq(0).removeClass("is-empty");

console.log(spanText);
console.log(playerName);

if (pickedD < 3) {
pickedD++;
}

if (pickedD === 3) {
$(".player--defenseman").not(":has(.is-selected)").css("pointer-events", "none");
console.log("Locked defensemen");
} else {
$(".player--defenseman").css("pointer-events", "auto");
}
}
}

if (player.hasClass("player--goalie")) {
if (spanText !== playerName) {
$(".player__pick--goalie.is-empty").eq(0).html(playerName);
$(".player__pick--goalie.is-empty").eq(0).removeClass("is-empty");

if (pickedG < 1){
pickedG++;
}

if (pickedG === 1) {
$(".player--goalie").not(":has(.is-selected)").css("pointer-events", "none");
console.log("Locked goalie");
} else {
$(".player--goalie").css("pointer-events", "auto");
}
}
}

console.log(pickedF, pickedD, pickedG);
});


index.html



// List
<ul>
<li><span class="player__pick player__pick--forward is-empty"><i class="fa fa-long-arrow-right" aria-hidden="true"></i> Pick a forward</span></li>
<li><span class="player__pick player__pick--forward is-empty"><i class="fa fa-long-arrow-right" aria-hidden="true"></i> Pick a forward</span></li>
<li><span class="player__pick player__pick--defenseman is-empty"><i class="fa fa-long-arrow-right" aria-hidden="true"></i> Pick a defenseman</span></li>
<li><span class="player__pick player__pick--defenseman is-empty"><i class="fa fa-long-arrow-right" aria-hidden="true"></i> Pick a defenseman</span></li>
<li><span class="player__pick player__pick--defenseman is-empty"><i class="fa fa-long-arrow-right" aria-hidden="true"></i> Pick a defenseman</span></li>
<li><span class="player__pick player__pick--goalie is-empty"><i class="fa fa-long-arrow-right" aria-hidden="true"></i> Pick a goalie</span></li>
</ul>

// Popup with Add to Team button
<div class="popup clearfix">
<div class="icon-container">
<i class="fa fa-times" aria-hidden="true"></i>
</div>
<img src="" alt="" class="popup__picture animated">

<div class="popup__text">
<p class="popup__position">tk-position</p>
<p class="popup__name">tk-name</p>
<p class="popup__years">tk-years</p>
<p class="popup__description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi ad dicta sunt unde, sed quae nihil inventore voluptates nulla voluptate laudantium nesciunt quo, aspernatur deleniti quod harum, nisi error doloribus.</p>
<div class="popup__stats">
<p>tk-stats</p>
</div>
<div class="buttons">
<button class="btn--add">Add to team</button>
<button class="btn--remove">Remove from team</button>
</div>
</div>
</div>

// Players
<div class="player player--pronger player--defenseman" data-id="16">
<div class="player__info animated">
<p class="player__name">Chris Pronger</p>
<p class="player__position">Defenseman</p>
</div>
</div>

<div class="player player--lefley player--forward" data-id="17">
<div class="player__info animated">
<p class="player__name">Chuck Lefley</p>
<p class="player__position">Forward</p>
</div>
</div>

<div class="player player--janney player--forward" data-id="18">
<div class="player__info animated">
<p class="player__name">Craig Janney</p>
<p class="player__position">Forward</p>
</div>
</div>

<div class="player player--joseph player--goalie" data-id="19">
<div class="player__info animated">
<p class="player__name">Curtis Joseph</p>
<p class="player__position">Goalie</p>
</div>
</div>

Answer

The problem is in this line:

var spanText = $(".player__pick").eq(0).text();

it selects the first element with player__pick class.
That's why this:

if (spanText !== playerName) {

will always compare playerName to the first element with player__pick class. It won't check whether the target element is a "defenseman", "forward", or "goalie".


Solution?

There're few ways to fix it. One of them is to check whether any of the .player__pick elements contains player name:

var player_exists = $('.player__pick:contains("'+playerName+'")').length;

Then:

if (!player_exists) {
    // do the stuff...
}

JSFiddle