Adding class to items

[boomer1204]

Hey guys,

Trying to add a class when isSelected is equal to true. I just can’t seem to wrap my head around where or how to add the class when it’s iterating over the dice. Here is the js code and I put a link to my codepen as well. I tried to do an if (isSelected) statement in the dice object and when i’m checking for 6, 5, 4 but nothing changes. Also i’m trying to do this in vanilla js not jquery.

$(document).ready(function() {
	$(".container").css("width", $(window).width());
	$(".container").css("height", $(window).height());
	$(".dice").height($(".dice").width());
	$("#roll_button").height($(".dice").width());
	
});

var dice1 = new dice(1);
var dice2 = new dice(2);
var dice3 = new dice(3);
var dice4 = new dice(4);
var dice5 = new dice(5);
var diceArray = [dice1, dice2, dice3, dice4, dice5];
var rollButton = document.getElementById('roll_button');
var cargo = 0;
var numOfRolls = 0;



//dice object
function dice(id){
    this.id = id;
    this.currentRoll = 0;
    this.previousRoll = 1;
    this.isSelected = false;
    this.diceImageUrl = "img/dice/dice1.png";
    this.roll = function(){
        this.previousRoll = this.currentRoll;
        this.currentRoll = getRandomRoll(1, 6);
    }
}

//returns an array of all dice that are not currently selected so they can be rolled.
function getRollableDiceList(){
    var tempDiceList = [];
    for(var i = 0; i < diceArray.length; i++){
        if(!diceArray[i].isSelected){
            tempDiceList.push(diceArray[i]);
        }
    }
    return tempDiceList;
}

// gets a random number between min and max (including min and max)
function getRandomRoll(min,max){
    return Math.floor(Math.random() * (max-min + 1) + min);
}

// calls the roll function on each dice
function rollDice(rollableDiceList){
    for(var i = 0; i < rollableDiceList.length; i++){
        rollableDiceList[i].roll();
    }
}

// updates each dice with the new url for the image that corresponds to what their current roll is
function updateDiceImageUrl(){
    for(var i = 0; i < diceArray.length; i++){
        var currentDice = diceArray[i];

        currentDice.diceImageUrl = "http://boomersplayground.com/img/dice/dice" + currentDice.currentRoll + ".png";

        //update div image with img that cooresponds to their current roll
        updateDiceDivImage(currentDice);
    }
}

//Displays the image that matches the roll on each dice
function updateDiceDivImage(currentDice) {
    document.getElementById("dice"+currentDice.id).style.backgroundImage = "url('" + currentDice.diceImageUrl +"')";
}

// returns an array of all
function getNonSelectedDice(){
    var tempArray = [];
    for(var i = 0; i < diceArray.length; i++){
        if(!diceArray[i].isSelected){
            tempArray.push(diceArray[i]);
        }
    }
    return tempArray;
}

//boolean variables
var shipExist = false;
var captExist = false;
var crewExist = false;

//checks each dice for ship captain and crew. Auto select the first 6, 5 , 4.
function checkForShipCaptCrew(){
    //array of dice that are not marked selected
    var nonSelectedDice = getNonSelectedDice();


    for(var i = 0; i < nonSelectedDice.length; i++){
        //temp variable that represents the current dice in the list
        currentDice = nonSelectedDice[i];

        if (!shipExist) {
            if (currentDice.currentRoll == 6) {
                shipExist = true;
                currentDice.isSelected = true;
            }
        } else if (!captExist) {
            if (currentDice.currentRoll == 5) {
                captExist = true;
                currentDice.isSelected = true;
            }
        } else if (!crewExist) {
            if (currentDice.currentRoll == 4) {
                crewExist = true;
                currentDice.isSelected = true;
            }
        } else {
            cargo += currentDice;
        }
    }

}


rollButton.addEventListener('click', function(){
        //generate rollable dice list
    if (numOfRolls < 3) {
        var rollableDiceList = getRollableDiceList();

        //roll each dice
        rollDice(rollableDiceList);

        //update dice images
        updateDiceImageUrl();

        // //auto select first 6, 5, 4 (in that order)
        checkForShipCaptCrew();

        // //adds a red glow to each dice that is selected
        // addGlow();
        numOfRolls++;
    }
})

http://codepen.io/boomer1204/pen/MaVzGL;

Thanks in advance guys.