Script stops working console dont give error (Beginner)

var highlightedCard;
var selectedIndices = [];


// Get the "Roll Dice" button element
var rollDiceButton = document.getElementById("rollDiceButton");
let canRollDice = true; // Flag to track if dice can be rolled

document.addEventListener('DOMContentLoaded', function() {
  // Add your event listeners here
  document.body.addEventListener("click", function() {
    if (canRollDice) {
      rollDice();
    } else {
      revealCard();
    }
  });

  // Other event listeners or initialization code
});

function rollDice() {
  if (highlightedCard || !canRollDice) {
    return; // Exit the function if a card is still highlighted or dice can't be rolled
  }

  canRollDice = false; // Disable rolling until revealCard is used

  var dice1 = document.getElementById("dice1");
  var dice2 = document.getElementById("dice2");

  // Apply the "roll" class to initiate the rolling animation
  dice1.classList.add("dice");
  dice2.classList.add("dice");

  // Create an array with the file names of all 6 possible dice faces
  var diceFaces = ["nummer1.PNG", "nummer2.PNG", "nummer3.PNG", "nummer4.PNG", "nummer5.PNG", "nummer6.PNG"];

  // Shuffle the diceFaces array
  shuffleArray(diceFaces);

  // Function to shuffle an array
  function shuffleArray(array) {
    for (var i = array.length - 1; i > 0; i--) {
      var j = Math.floor(Math.random() * (i + 1));
      var temp = array[i];
      array[i] = array[j];
      array[j] = temp;
    }
  }

  // Switch dice images during the animation
  for (let i = 0; i < diceFaces.length; i++) {
    setTimeout(() => {
      dice1.src = diceFaces[i];
      dice2.src = diceFaces[i];
    }, i * 250); // Switch every 250 milliseconds, adjust the timing as needed
  }

  // After switching all faces, randomly select the final face
  setTimeout(() => {
    var result1 = Math.floor(Math.random() * 6) + 1;
    var result2 = Math.floor(Math.random() * 6) + 1;

    dice1.src = `nummer${result2}.PNG`;
    dice2.src = `nummer${result1}.PNG`;

    // Calculate the index based on the original axis
    var selectedIndex = (result1 - 1) * 6 + (6 - result2) + 1;
    console.log(selectedIndex);

    // Check if the selected index has already been selected
    while (selectedIndices.includes(selectedIndex)) {
      // Move to the next index
      selectedIndex = (selectedIndex % 36) + 1; // Assuming 36 cards in total
    }

    var selectedCard = document.getElementById(`card-${selectedIndex}`);

    if (selectedCard) {
      // Highlight the selected card
      selectedCard.classList.add("selected");

      // Set the highlighted card
      highlightedCard = selectedCard;

      // Show the "Reveal Card" button
      revealCardButton.style.display = "none";

      // Add the index to the selected indices list
      selectedIndices.push(selectedIndex);

      console.log(selectedIndices);

      // Remove the "dice" class to reset the animation for the next roll
      setTimeout(() => {
        dice1.classList.remove("dice");
        dice2.classList.remove("dice");

        canRollDice = true; // Enable rolling for the next roll
      }, 1500); // Adjust the timing to match the animation duration
    }
  }, diceFaces.length * 250); // Adjust the timing to match the animation duration
}

revealCardButton.addEventListener("click", revealCard);

function revealCard() {
  console.log("Before reveal: ", highlightedCard);

  if (highlightedCard) {
    handleCardClick(highlightedCard);

    console.log("After handleCardClick: ", highlightedCard);

    // Remove the highlight class
    highlightedCard.classList.remove("selected");

    // Reset the highlighted card variable
    highlightedCard = null;

    console.log("After reset: ", highlightedCard);

    // Hide the "Reveal Card" button
    revealCardButton.style.display = "none";

    // Reset canRollDice to true
    canRollDice = true;
  }
}

@keyframes roll {
  0% {
    transform: rotate(0deg) rotateX(0deg) translateY(0);
  }
  20% {
    transform: rotate(180deg) rotateX(180deg) translateY(-20px);
  }
  40% {
    transform: rotate(360deg) rotateX(0deg) translateY(0);
  }
  60% {
    transform: rotate(540deg) rotateX(180deg) translateY(-20px);
  }
  80% {
    transform: rotate(720deg) rotateX(0deg) translateY(0);
  }
  100% {
    transform: rotate(900deg) rotateX(180deg) translateY(-20px);
  }
}

.dice {
  animation: roll 1.5s cubic-bezier(0.42, 0, 0.58, 1);
}

<!DOCTYPE html>
<html>

<head>
  <link href="styles10.css" rel="stylesheet">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.6.0/css/bootstrap.min.css">
  <title>Goudzoeken</title>
  <style>

  </style>
</head>

<body>
  <div class="grid-container">
    <div class="deck-container" id="deck-container"></div>
    <div class="container-wrapper" id="none">
      <div class="controls-container">
        <button id="rollDiceButton">Roll Dice</button>
        <button id="revealCardButton" style="display:none;">Reveal Card Color</button>
      </div>
      <div class="dice-container">
        <img id="dice1" class="dice-image" src="nummer1.PNG" alt="Dice 1">
        <img id="dice2" class="dice-image" src="nummer1.PNG" alt="Dice 1">
      </div>
    </div>
  </div>