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

<!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 class="">
      <h1 class="main-title">Dice Game</h1>
      <h1 class="p1-win-title">Player 1 Wins!</h1>
      <h1 class="p2-win-title">Player 2 Wins!</h1>
      <h1 class="tie-title">It's a tie!</h1>
    </div>

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

      <div class="player2-div">
        <div class="player2-div-header">
          <h3 class="header-p2">Player 2</h3>
        </div>
        <div class="dice-p2-div">
          <img class="p2-dice1-img" src="images/dice1.png" alt="">
          <img class="p2-dice2-img" src="images/dice2.png" alt="">
          <img class="p2-dice3-img" src="images/dice3.png" alt="">
          <img class="p2-dice4-img" src="images/dice4.png" alt="">
          <img class="p2-dice5-img" src="images/dice5.png" alt="">
          <img class="p2-dice6-img" src="images/dice6.png" alt="">
        </div>
      </div>
    </div>

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

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

'''

Nekan123 · Accepted Answer · 2022-02-22 16:29:06Z

2

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

answered Feb 22, 2022 at 16:29

Nekan123

723 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ale Over a year ago

Thank you! I copied the code from the other loop. I'm stupid. LOL

Samball · Accepted Answer · 2022-02-22 16:24:03Z

1

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.

answered Feb 22, 2022 at 16:24

Samball

8791 gold badge17 silver badges28 bronze badges

Collectives™ on Stack Overflow

Using DOM to manipulate css visibility

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related