I have 60 hockey .players. There are ten goalies (players numbered 1-10), twenty defensemen (players numbered 11-30) and thirty forwards (players numbered 31-60). On click, the button .btn--random should randomly add the class is-active to two goalie, six defensemen and twelve forwards and remove the class is-inactive
When I generate the numbers using a series of for loops and a
combination of Math.floor(Math.random()) sometimes the random
generated numbers are the same, which can't happen as each player is
unique and can only be chosen once.
I've thought about forEach or indexOf to help solve this problem,
but I'm pretty lost on how the numbers generated will add the class
of is-active to the appropriate player in the list of the 60
players. It's specifically this line <div class="picked is-inactive"> that should be altered in the HTML
function randomSelection(min, max) {
$(".btn--random").on("click", function(){
// There are 60 hockey players in total
// The first player is 1, the second player is 2 and so on ...
// There are 10 goalies, 20 defencemen and 30 forwards
// Generate two numbers between 1-10
for (var i = 0; i < 2; i++) {
var randTwo = Math.floor(Math.random()*10 + 1);
console.log(randTwo);
if (randTwo === randTwo) {
}
};
// Currently generates six numbers between 1-20
// Should generate six numbers between 11-30
for (var i = 0; i < 6; i++) {
var randSix = Math.floor(Math.random()*20 + 1);
console.log(randSix);
if (randSix === randSix) {
}
};
// Currently generates twelve numbers between 1-30
// Should generate two numbers between 31-60
for (var i = 0; i < 6; i++) {
var randTwelve = Math.floor(Math.random()*30 + 1);
console.log(randTwelve);
if (randTwelve === randTwelve) {
}
};
// Store the 20 randomly generated numbers into an array?
var array = []
// Add the class `is-active` based on the numbers generated
var player = $(".player");
var rand = Math.floor(Math.random()* 60);
player.eq(rand).addClass("is-active");
});
} randomSelection();
<button class="btn btn--random">Random</button>
<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--games">
<p class="stats__header">GP</p>
<p class="stats__number stats__number--games">110</p>
</div>
<div class="stats__group stats--goalsag">
<p class="stats__header">GA</p>
<p class="stats__number stats__number--goalsag">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--savep">
<p class="stats__header">SAV%</p>
<p class="stats__number stats__number--savep">.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 stats__number--shutouts">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>
Could you please take a look at this code:
$(document).ready(function() {
$(".btn--random").on("click", function() {
var goalies_array = getRandomNumbers(1, 10, 2);
$(".goalies").text(goalies_array.join(","));
var defensemen_array = getRandomNumbers(11, 30, 6);
$(".defensemen").text(defensemen_array.join(","));
var forwards_array = getRandomNumbers(31, 60, 12);
$(".forwards").text(forwards_array.join(","));
var players_array = goalies_array.concat(defensemen_array).concat(forwards_array);
// Add the class `is-active` based on the numbers generated
var player = $(".player");
$(".is-active").removeClass("is-active").addClass("is-inactive");
$.each(players_array, function(index, value) {
var player_index = value - 1; //we are using 0 based indexing
player.eq(player_index).find(".is-inactive").removeClass("is-inactive").addClass("is-active");
});
});
});
function getRandomNumbers(start, end, howMany) {
var arr = [];
for (var i = start, j = 0; i <= end; j++, i++)
arr[j] = i
arr.sort(function() {
return Math.floor((Math.random() * 3) - 1)
});
return arr.splice(0, howMany)
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<button class="btn btn--random">Random</button>
<br/>
<br/>Goalies
<div class="goalies"></div>
<br/>Defensemen
<div class="defensemen"></div>
<br/>Forwards
<div class="forwards"></div>
<br/>