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

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 )

  <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: "AIzaSyAYPk1PRYk4II2IoWztwLchcpqYzHEWeMw",
    authDomain: "filetirgul.firebaseapp.com",
    databaseURL: "https://filetirgul-default-rtdb.firebaseio.com",
    projectId: "filetirgul",
    storageBucket: "filetirgul.appspot.com",
    messagingSenderId: "53849089655",
    appId: "1:53849089655:web:e64c2f84a7067133f44872"
  };
  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 class="body">
      <div class="gameArea">
        <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 class="toggleGame">
        <button class="start" id="start" onclick="startGame()">Start</button>
      </div>
      <div class="highscore">
        Highscore:
      </div>
    </div>
  </body>
</html>

Leave a Comment