index.html:121 Uncaught ReferenceError: (function) is not defined at HTMLButtonElement.onclick(-CodePudding

We are trying to make a memory game but we are getting an error on our functions: startGame, imgClick, etc. The cards are supposed to shuffle at random when we press the start button.

We are getting images from firebase storage and use an array of strings to shuffel their position in our game.

when we try to start the game we get an error:

Uncaught ReferenceError: startGame is not defined at HTMLButtonElement.onclick (index.html:121:64)

Javascript (in the <head>)

  <script type="module">
  import { initializeApp } from "https://www.gstatic.com/firebasejs/9.8.2/firebase-app.js";
  import { getStorage, ref, getDownloadURL } from "https://www.gstatic.com/firebasejs/9.8.2/firebase-storage.js";

  const firebaseConfig = {
    apiKey: "*****************",
    authDomain: "filetirgul.firebaseapp.com",
    databaseURL: "https://filetirgul-default-rtdb.firebaseio.com",
    projectId: "filetirgul",
    storageBucket: "filetirgul.appspot.com",
    messagingSenderId: "53849089655",
    appId: "1:53849089655:web:**************"
  };
  const app = initializeApp(firebaseConfig);

  var started = false;

  var backOfCards = "gs://filetirgul.appspot.com/think.jpg";

  var images = ["monkey.jpg","monkey2.jpg","face.jpg","face2.jpg","office.jpg","office2.jpg","cat.jpg","cat2.jpg","drunk.jpg","drunk2.jpg","donky.jpg","donky2.jpg","hally.jpg","hally2.jpg","potato.jpg","potato2.jpg"]


  var backOfCards = "gs://filetirgul.appspot.com/think.jpg";

  var images = ["monkey.jpg","monkey2.jpg","face.jpg","face2.jpg","office.jpg","office2.jpg","cat.jpg","cat2.jpg","drunk.jpg","drunk2.jpg","donky.jpg","donky2.jpg","hally.jpg","hally2.jpg","potato.jpg","potato2.jpg"]

  document.getElementById('img1').addEventListener('click', imgClick(1));
  document.getElementById('img2').addEventListener('click', imgClick(2));
  document.getElementById('img3').addEventListener('click', imgClick(3));
  document.getElementById('img4').addEventListener('click', imgClick(4));
  document.getElementById('img5').addEventListener('click', imgClick(5));
  document.getElementById('img6').addEventListener('click', imgClick(6));
  document.getElementById('img7').addEventListener('click', imgClick(7));
  document.getElementById('img8').addEventListener('click', imgClick(8));
  document.getElementById('img9').addEventListener('click', imgClick(9));
  document.getElementById('img10').addEventListener('click', imgClick(10));
  document.getElementById('img11').addEventListener('click', imgClick(11));
  document.getElementById('img12').addEventListener('click', imgClick(12));
  document.getElementById('img13').addEventListener('click', imgClick(13));
  document.getElementById('img14').addEventListener('click', imgClick(14));
  document.getElementById('img15').addEventListener('click', imgClick(15));
  document.getElementById('img16').addEventListener('click', imgClick(16));

  function imgClick(index) {
    if (started) {
      const storage = getStorage(app);
      getDownloadURL(ref(storage, images[index-1]))
      .then((url) => {
      // Or inserted into an <img> element
      var img = document.getElementById('img'   index);
      img.setAttribute('src', url);
      });
    }
  }

  function startGame() {
      shuffle();
      started = true;
      for (let i = 0 ; i < images.length ; i  ) {
        const storage = getStorage(app);
        getDownloadURL(ref(storage,
          [index-1]))
        .then((url) => {
          // Or inserted into an <img> element
          var img = document.getElementById('img'   index);
          img.setAttribute('src', url);
      });
    }
  }


  function shuffle() {
    for (let i = 0; i < images.length; i  ) {
      let currentIndex = i;
      let randomIndex = Math.floor(Math.random()*images.length);
      let tempImg = images[currentIndex];

      images[currentIndex] = images[randomIndex];
      images[randomIndex] = tempImg;
    }
  }

  </script>

HTML

</head>
  <body>
    <div >
      <div >
        <div id="c1"><img id="img1" src="img/think.jpg" alt="image" height="200" width="200"><img></div>
        <div id="c2"><img id="img2" src="img/think.jpg" alt="image" height="200" width="200"></div>
        <div id="c3"><img id="img3" src="img/think.jpg" alt="image" height="200" width="200"></div>
        <div id="c4"><img id="img4" src="img/think.jpg" alt="image" height="200" width="200"></div>
        <div id="c5"><img id="img5" src="img/think.jpg" alt="image" height="200" width="200"></div>
        <div id="c6"><img id="img6" src="img/think.jpg" alt="image" height="200" width="200"></div>
        <div id="c7"><img id="img7" src="img/think.jpg" alt="image" height="200" width="200"></div>
        <div id="c8"><img id="img8" src="img/think.jpg" alt="image" height="200" width="200"></div>
        <div id="c9"><img id="img9" src="img/think.jpg" alt="image" height="200" width="200"></div>
        <div id="ca"><img id="img10" src="img/think.jpg" alt="image" height="200" width="200"></div>
        <div id="cb"><img id="img11" src="img/think.jpg" alt="image" height="200" width="200"></div>
        <div id="cc"><img id="img12" src="img/think.jpg" alt="image" height="200" width="200"></div>
        <div id="cd"><img id="img13" src="img/think.jpg" alt="image" height="200" width="200"></div>
        <div id="ce"><img id="img14" src="img/think.jpg" alt="image" height="200" width="200"></div>
        <div id="cf"><img id="img15" src="img/think.jpg" alt="image" height="200" width="200"></div>
        <div id="cg"><img id="img16" src="img/think.jpg" alt="image" height="200" width="200"></div>
      </div>
      <div >
        <button  id="start" onclick="startGame()">Start</button>
      </div>
      <div >
        Highscore:
      </div>
    </div>
  </body>
</html>

CodePudding user response：

Add this

document.getElementById('start').addEventListener('click', startGame);

CodePudding user response：

You are missing the event listener for the start button.

Pure js:

document.getElementById('start').addEventListener('click', startGame);