title: Initiating gameReady function on button click
body: <p>I'm fairly new at JS and I was watching a tutorial on how to create a simple memory game. I was confident enough to understand the logic behind the code to start making changes but perhaps I dont understand it as well as I thought i did.</p>
  
  <p>Currently,the game starts and works when I click on the overlay text when the page reloads. I want to change this so the game ONLY starts when I click on the newly created "Start" button.</p>
  
  <p>Ive tried the code below but it doesnt seem to be working. No error on my console.log.</p>
  
  <p>Anyone able to point me at the right direction as to what the heck Im doing wrong? Any help appreciated. Thanks!</p>
  
  <pre><code>function gameReady() {
      let overlays = Array.from(document.getElementsByClassName("screen-overlay"));
      let cards = Array.from(document.getElementsByClassName("card"));
      let startButton = Array.from(document.getElementById("start"));
      let game = new SimpleMemoryGame (60, cards);
  
      overlays.forEach(overlay =&gt; {
          overlay.addEventListener("click",() =&gt;{
              overlay.classList.remove("show-front");
              //game.startGame();
          });
      });
      cards.forEach(card =&gt;{
          card.addEventListener("click" , () =&gt; {
              game.flip(card);
          });
      });
  
      startButton.forEach(start =&gt;{
          startButton.addEventListener("click" , () =&gt; {
              game.startGame();
          });
      });
  </code></pre>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>class SimpleMemoryGame {
      constructor (time, cards) {
          this.cardsList = cards;
          this.time = time;
          this.timeLeft= time;
          this.timerElement = document.getElementById("time-left");
          
      }
  
      startGame (){
          this.cardToCheck = null;
          this.timeLeft = this.time;
          this.matches = []; 
          this.busy = true;
          setTimeout(()=&gt; {
              this.shuffle(this.cardsList);
              this.timerStarted = this.startTimer();
              this.busy = false;
          },500);
          this.hideCards();
          this.timerElement.innerText = this.timeLeft;
  
  
      }
  
      //Goes through all the cards to remove the "show-front" class at the start of every game
  
      hideCards() {
          this.cardsList.forEach (card =&gt; {
          card.classList.remove("show-front");
      });
  
      }
  
  
      gameOver(){
          clearInterval(this.timerStarted);
          document.getElementById("game-over-screen").classList.add("show-front");
  
      }
  
      win (){
          clearInterval(this.timerStarted);
          document.getElementById("you-won").classList.add("show-front");
      }
  
      //Timer with if statement to trigger gameOver function when it is equal to 0. 
      //setInterval set at 1000 ms to replicate 1s countdown
      startTimer() {
              return setInterval(() =&gt; {
              this.timeLeft-=1 ;
              this.timerElement.innerHTML = this.timeLeft;
              if (this.timeLeft === 0) this.gameOver();
  
          },1000);
      }
      
      //Function to check whether card can be flipped by checking other functions as conditions with an if statement 
      flip(card) {
          if (this.cardIsFlippable(card)){
              card.classList.add("show-front");
  
              if(this.cardToCheck) {
                  this.matchedCardChecker(card);
              } else {
                this.cardToCheck = card;
              }
          }
  
      }
  
      matchedCardChecker (card){
  
          if(this.getCardType(card) === this.getCardType(this.cardToCheck))
              this.cardMatches(card,this.cardToCheck);
          else
              this.cardDoesNotMatch (card,this.cardToCheck);
  
          this.cardToCheck = null;
  
      }
  
      cardMatches(card1,card2) {
          this.matches.push(card1);
          this.matches.push(card2);
          if (this.matches.length === this.cardsList.length)  this.win();
             
  
      }
  
      cardDoesNotMatch(card1,card2){
          this.busy = true;
          setTimeout(() =&gt; {
              card1.classList.remove("show-front");
              card2.classList.remove("show-front");
              this.busy= false;
          },1000
          )
  
      }
  
      getCardType(card){
          return card.getElementsByClassName("card-match")[0].src;
      }
  
      shuffle() {
          
          for(let i = this.cardsList.length -1; i&gt;0; i--) {
              let randomise = Math.floor(Math.random() * (i+1));
              this.cardsList[randomise].style.order = i; 
              this.cardsList [i].style.order = randomise;
          }
      }
     // Function to check if the user can flip the card
     cardIsFlippable(card){ 
     //All statements need to return false in order for it to be true so they can flip the card
          return !this.busy &amp;&amp; !this.matches.includes(card) &amp;&amp; card !== this.cardToCheck;
      }
  
  }
  
  // Statement to check if the page has loaded 
  if (document.readyState === "loading") {
      document.addEventListener ("DOMContentLoaded",gameReady());
  } else {
      gameReady();
  }
  
  
  function gameReady() {
      let overlays = Array.from(document.getElementsByClassName("screen-overlay"));
      let cards = Array.from(document.getElementsByClassName("card"));
      let game = new SimpleMemoryGame (60, cards);
      
      overlays.forEach(overlay =&gt; {
          overlay.addEventListener("click",() =&gt;{
              overlay.classList.remove("show-front");
              //game.startGame();
          });
      });
      cards.forEach(card =&gt;{
          card.addEventListener("click" , () =&gt; {
              game.flip(card);
          });
      });
  
  }  </code></pre>
  </div>
  </div>
  </p>