Using DOM to manipulate css visibility-CodePudding

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; */
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <!-- css -->
    <link rel="stylesheet" href="css/styles.css">

    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;400;900&family=Roboto&display=swap" rel="stylesheet">

    <title></title>
  </head>
  <body>
    <!-- Title and winner -->
    <div >
      <h1 >Dice Game</h1>
      <h1 >Player 1 Wins!</h1>
      <h1 >Player 2 Wins!</h1>
      <h1 >It's a tie!</h1>
    </div>

    <!-- Dice header -->
    <div >
      <div >
        <div >
          <h3 >Player 1</h3>
        </div>
        <div >
          <img  src="images/dice1.png" alt="">
          <img  src="images/dice2.png" alt="">
          <img  src="images/dice3.png" alt="">
          <img  src="images/dice4.png" alt="">
          <img  src="images/dice5.png" alt="">
          <img  src="images/dice6.png" alt="">
        </div>
      </div>

      <div >
        <div >
          <h3 >Player 2</h3>
        </div>
        <div >
          <img  src="images/dice1.png" alt="">
          <img  src="images/dice2.png" alt="">
          <img  src="images/dice3.png" alt="">
          <img  src="images/dice4.png" alt="">
          <img  src="images/dice5.png" alt="">
          <img  src="images/dice6.png" alt="">
        </div>
      </div>
    </div>

    <!-- Buttton -->
    <div >
      <button  onclick="pickWinner();" type="button" name="button">Roll</button>
    </div>

    <!-- Footer -->
    <div >
      <p>Dice Game</p>
      <p>Alexandre Luiz Elias</p>
    </div>
  <script src="js/index.js" charset="utf-8"></script>
  </body>
</html>

'''

CodePudding user response：

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");
  }

CodePudding user response：

It happens because when you grab the arrayTitleClasses with var arrayTitleClasses = document.querySelectorAll("[class*='-title']"); and loop over it. This array is only 4 elements long and you are looping trough it 11 times.