Using DOM to manipulate css visibility

Question

guys. I'm pretty new to JS and i'm stuck with a problem for quite sometime now. My code is a simple dice game. When you press a button, you call a JS function that randomize 12 dice images and display certain images and a title with the winner depending on the dice value.

The problem is that i'm using DOM to add and remove a class from my HTML elements to control the visibility of the element throug CSS. There's two loops to "clean" my elements from previous runs. The first one seems to work (arrayImagesClasses) and the second i get an error on console (arrayTitleClasses).

My doubts are:

Why does my second loop does not work?
Is that a proper way to do that manipulation? (my solution looks "dumb")

Thanks in advance.

'''

function getRandomDiceNumber(){
  return Math.ceil(Math.random() * 6)
}

function pickWinner() {
  // Remove visibility class from all dice images in previous runs
  var arrayImagesClasses = document.querySelectorAll("[class*='-img']");
  for ( i = 0; i <= 11; i++ ) {
    arrayImagesClasses[i].classList.remove("dice-img-visibility");
  }

  //Remove visibility class from titles
  var arrayTitleClasses = document.querySelectorAll("[class*='-title']");
  for ( j = 0; j <= 11; j++ ) {
    arrayTitleClasses[j].classList.remove("pick-winner");
  }

  // get random dice (1 - 6) number
  var randomNumberPlayerOne = getRandomDiceNumber();
  var randomNumberPlayerTwo = getRandomDiceNumber();

  // use same dice function to access index of dice imgages array
  var diceImgPlayerOne = document.querySelector(".p1-dice"+ randomNumberPlayerOne + "-img");
  var diceImgPlayerTwo = document.querySelector(".p2-dice"+ randomNumberPlayerTwo + "-img");

  if (randomNumberPlayerOne > randomNumberPlayerTwo) {
    document.querySelector(".p1-win-title").classList.toggle("pick-winner");
    diceImgPlayerOne.classList.toggle("dice-img-visibility");
    diceImgPlayerTwo.classList.toggle("dice-img-visibility");

  } else if (randomNumberPlayerOne < randomNumberPlayerTwo) {
    document.querySelector(".p2-win-title").classList.toggle("pick-winner");
    diceImgPlayerOne.classList.toggle("dice-img-visibility");
    diceImgPlayerTwo.classList.toggle("dice-img-visibility");

  } else {
    document.querySelector(".tie-title").classList.toggle("pick-winner");
    diceImgPlayerOne.classList.toggle("dice-img-visibility");
    diceImgPlayerTwo.classList.toggle("dice-img-visibility");
  }
}

body {
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  background-color: #495371;
  color: #EEEEEE;
}

img {
  width: 290px;
  height: auto;
  visibility: visible;
  /* position: absolute; */
  margin: auto;
}

h1 {
  font-size: 5rem;
}

/* Titles */
.p1-win-title {
  display: none;
}
.p2-win-title {
  display: none;
}
.tie-title {
  display: none;
}

.pick-winner {
  /* display: visible; */
  display: block;
}

/* Players Dice */
.player1-div {
  display: inline-block;
  width: 400px;
  height: 400px;
}

.player2-div {
  display: inline-block;
  width: 400px;
  height: 400px;
}

.header-p1, .header-p2 {
  font-size: 2rem;
  font-weight: 400;
}

.dice-p1-div {
  position: relative;
}

.dice-p2-div {
  position: relative;
}
.p1-dice1-img, .p1-dice2-img,
.p1-dice3-img, .p1-dice4-img,
.p1-dice5-img, .p1-dice6-img {
  position: absolute;
  left: 60px;
  display: none;
}

.p2-dice1-img, .p2-dice2-img,
.p2-dice3-img, .p2-dice4-img,
.p2-dice5-img, .p2-dice6-img {
  position: absolute;
  left: 60px;
  display: none;
}

.dice-img-visibility {
  display: inline;
}

.button-div{
  margin: 3% auto;
}

.button-roll {
  height: 70px;
  width: 200px;
  border-radius: 10px;
  border: 0;
  font-size: 1.8Rem;
  font-family: 'Montserrat', sans-serif;
  font-weight: bold;
}

.footer {
  bottom: 0;
  position: static;
  width: 100%;
  /* margin: 2% auto; */
}



  
    
    
    

    
    
    
    

    
  
  
    
    
      Dice Game
      Player 1 Wins!
      Player 2 Wins!
      It's a tie!
    

    
    
      
        
          Player 1
        
        
          
          
          
          
          
          
        
      

      
        
          Player 2
        
        
          
          
          
          
          
          
        
      
    

    
    
      
    

    
    
      Dice Game
      Alexandre Luiz Elias

'''

Nekan123 · Accepted Answer

You cant be sure the lengths of your arrays will always be 11. Try the following code below;

//Remove visibility class from titles
  var arrayTitleClasses = Array.from(document.querySelectorAll("[class*='-title']"));
  for ( j = 0; j <= arrayTitleClasses.length; j++ ) {
    arrayTitleClasses[j].classList.remove("pick-winner");
  }

Using DOM to manipulate css visibility

Answers (2)

Related Questions